├── .gitignore ├── README.md ├── babel.config.js ├── package-lock.json ├── package.json ├── public ├── favicon.ico └── index.html └── src ├── Admin.vue ├── App.vue ├── Post.vue ├── Signin.vue ├── Signup.vue ├── assets └── logo.png ├── cmps ├── Alert.vue ├── MenuLink.vue ├── Nav.vue └── PostItem.vue ├── main.js ├── plugins └── axios.js ├── routes.js └── store └── store.js /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /dist 4 | 5 | # local env files 6 | .env.local 7 | .env.*.local 8 | 9 | # Log files 10 | npm-debug.log* 11 | yarn-debug.log* 12 | yarn-error.log* 13 | 14 | # Editor directories and files 15 | .idea 16 | .vscode 17 | *.suo 18 | *.ntvs* 19 | *.njsproj 20 | *.sln 21 | *.sw? 22 | .env -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # VueJS Blog for CodeIgniter 4 RESTapi server 2 | This project requires also a RESTapi server that is uploaded in this repository 3 | https://github.com/alexlancer/CodeIgniter-RESTapi-Server-for-VueJS-Blog-project 4 | 5 | ## Project setup 6 | ``` 7 | npm install 8 | ``` 9 | 10 | ### Compiles and hot-reloads for development 11 | ``` 12 | npm run serve 13 | ``` 14 | 15 | ### Compiles and minifies for production 16 | ``` 17 | npm run build 18 | ``` 19 | 20 | ### Lints and fixes files 21 | ``` 22 | npm run lint 23 | ``` 24 | 25 | ### Customize configuration 26 | See [Configuration Reference](https://cli.vuejs.org/config/). 27 | -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | '@vue/cli-plugin-babel/preset' 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "civueblog", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "serve": "vue-cli-service serve", 7 | "build": "vue-cli-service build", 8 | "lint": "vue-cli-service lint" 9 | }, 10 | "dependencies": { 11 | "axios": "^0.19.2", 12 | "core-js": "^3.6.4", 13 | "vue": "^2.6.11", 14 | "vue-axios": "^2.1.5", 15 | "vue-router": "^3.1.6", 16 | "vuex": "^3.4.0" 17 | }, 18 | "devDependencies": { 19 | "@vue/cli-plugin-babel": "~4.3.0", 20 | "@vue/cli-plugin-eslint": "~4.3.0", 21 | "@vue/cli-service": "~4.3.0", 22 | "babel-eslint": "^10.1.0", 23 | "eslint": "^6.7.2", 24 | "eslint-plugin-vue": "^6.2.2", 25 | "vue-template-compiler": "^2.6.11" 26 | }, 27 | "eslintConfig": { 28 | "root": true, 29 | "env": { 30 | "node": true 31 | }, 32 | "extends": [ 33 | "plugin:vue/essential", 34 | "eslint:recommended" 35 | ], 36 | "parserOptions": { 37 | "parser": "babel-eslint" 38 | }, 39 | "rules": {} 40 | }, 41 | "browserslist": [ 42 | "> 1%", 43 | "last 2 versions", 44 | "not dead" 45 | ] 46 | } 47 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alexlancer/Ci4-VueJs-Blog/952715ba616e8bdb41d7a8df3f259b537d93fda5/public/favicon.ico -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Ci4 Vue Blog 9 | 15 | 16 | 17 | 24 |
25 | 26 | 31 | 36 | 41 | 42 | 43 | -------------------------------------------------------------------------------- /src/Admin.vue: -------------------------------------------------------------------------------- 1 | 69 | 70 | 209 | 210 | -------------------------------------------------------------------------------- /src/App.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 43 | 44 | 75 | -------------------------------------------------------------------------------- /src/Post.vue: -------------------------------------------------------------------------------- 1 | 21 | 22 | 48 | 49 | -------------------------------------------------------------------------------- /src/Signin.vue: -------------------------------------------------------------------------------- 1 | 40 | 41 | 98 | 99 | -------------------------------------------------------------------------------- /src/Signup.vue: -------------------------------------------------------------------------------- 1 | 82 | 83 | 129 | 130 | -------------------------------------------------------------------------------- /src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alexlancer/Ci4-VueJs-Blog/952715ba616e8bdb41d7a8df3f259b537d93fda5/src/assets/logo.png -------------------------------------------------------------------------------- /src/cmps/Alert.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 12 | 13 | -------------------------------------------------------------------------------- /src/cmps/MenuLink.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 12 | 13 | -------------------------------------------------------------------------------- /src/cmps/Nav.vue: -------------------------------------------------------------------------------- 1 | 33 | 34 | 53 | 54 | -------------------------------------------------------------------------------- /src/cmps/PostItem.vue: -------------------------------------------------------------------------------- 1 | 29 | 30 | 35 | 36 | -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from "vue"; 2 | import App from "./App.vue"; 3 | import router from "./routes.js"; 4 | import { guest } from "./plugins/axios"; 5 | import { store } from "./store/store"; 6 | 7 | Vue.config.productionTip = false; 8 | 9 | new Vue({ 10 | router, 11 | guest, 12 | store, 13 | render: (h) => h(App), 14 | }).$mount("#app"); 15 | -------------------------------------------------------------------------------- /src/plugins/axios.js: -------------------------------------------------------------------------------- 1 | import Vue from "vue"; 2 | import axios from "axios"; 3 | import { store } from "../store/store"; 4 | 5 | const guest = axios.create({ 6 | baseURL: "http://localhost/user", 7 | headers: { 8 | "Content-Type": "application/x-www-form-urlencoded", 9 | "X-Requested-With": "XMLHttpRequest", 10 | }, 11 | }); 12 | 13 | const api = axios.create({ 14 | baseURL: "http://localhost", 15 | headers: { 16 | "Content-Type": "application/x-www-form-urlencoded", 17 | "X-Requested-With": "XMLHttpRequest", 18 | }, 19 | }); 20 | 21 | api.interceptors.request.use((config) => { 22 | const token = localStorage.getItem("token"); 23 | if (token) { 24 | config.headers["Authorization"] = "Bearer " + token; 25 | } 26 | 27 | return config; 28 | }); 29 | 30 | api.interceptors.response.use( 31 | function(response) { 32 | return response; 33 | }, 34 | function(error) { 35 | if (error.response.status === 401) { 36 | store.dispatch("logout"); 37 | } else { 38 | return Promise.reject(error); 39 | } 40 | } 41 | ); 42 | 43 | Vue.prototype.$guest = guest; 44 | Vue.prototype.$api = api; 45 | 46 | export { guest, api }; 47 | -------------------------------------------------------------------------------- /src/routes.js: -------------------------------------------------------------------------------- 1 | import Vue from "vue"; 2 | import Router from "vue-router"; 3 | import Signin from "./Signin"; 4 | import Signup from "./Signup"; 5 | import Admin from "./Admin"; 6 | import Post from "./Post"; 7 | 8 | Vue.use(Router); 9 | 10 | const router = new Router({ 11 | routes: [ 12 | { 13 | path: "/", 14 | component: Admin, 15 | name: "Home", 16 | }, 17 | { 18 | path: "/post/:id", 19 | component: Post, 20 | name: "Post", 21 | }, 22 | { 23 | path: "/signin", 24 | component: Signin, 25 | name: "Signin", 26 | }, 27 | { 28 | path: "/signup", 29 | component: Signup, 30 | name: "Signup", 31 | }, 32 | ], 33 | mode: "history", 34 | }); 35 | 36 | export default router; 37 | -------------------------------------------------------------------------------- /src/store/store.js: -------------------------------------------------------------------------------- 1 | import Vue from "vue"; 2 | import Vuex from "vuex"; 3 | import router from "../routes"; 4 | 5 | Vue.use(Vuex); 6 | 7 | export const store = new Vuex.Store({ 8 | state: { 9 | isLoggedIn: false, 10 | }, 11 | getters: { 12 | loginState: (state) => { 13 | return state.isLoggedIn; 14 | }, 15 | }, 16 | mutations: { 17 | login(state) { 18 | state.isLoggedIn = true; 19 | if (router.currentRoute.name !== "Home") router.push("/"); 20 | }, 21 | logout(state) { 22 | state.isLoggedIn = false; 23 | localStorage.removeItem("token"); 24 | localStorage.removeItem("expires"); 25 | 26 | router.push("/signin"); 27 | }, 28 | }, 29 | actions: { 30 | login({ commit }, expires_in) { 31 | setTimeout(() => { 32 | commit("logout"); 33 | }, expires_in); 34 | commit("login"); 35 | }, 36 | logout({ commit }) { 37 | commit("logout"); 38 | }, 39 | }, 40 | }); 41 | --------------------------------------------------------------------------------