Vue webpack前后端分离整理学习整理

---

**

搭建Vue webpack开发环境

**

安装全局vue-cli脚手架

npm install -g vue-cli 

全局安装webpack

npm install webpack -g

创建一个基于webpack模板的新项目

vue init webpack myproject

安装项目依赖

npm install

进入项目根目录启动项目

npm run dev

配置express服务器

在根目录下创建server文件夹
server/app.js

server/db.js数据库连接池

server/api/login.js

这里只介绍登录功能，注册就是往数据库里添加数据，只是需要更改selectSQL这个查询语句

在项目中引用bootstrap

先在src/assets文件夹下新建css js font 三个文件夹，将bootstrap放入其中
安装jquery插件：npm install jquery --save-dev让vue

安装支持css的插件：

npm install style-loader --save-dev

npm install css-loader --save-dev

npm install file-loader --save-dev

然后在main.js下全局引入bootstrap.css
import "./assets/css/bootstrap.css" //这种方法不知道为什么总有警告
目前我给他放在了应用样式的文件下

<style>
@import "../assets/css/bootstrap.css"
</style>

---

**

webpack下对路由的使用

**

在src/router/index.js这里是控制前端的路由
这里只有用户登录到首页的路由

---

axios.post传参问题解决

登录页面login.vue

说一下大概的结构
两个input通过v-model获取到密码和手机号的输入值
tempalte里的html就不展示了，大家都会，下面的js代码最恶心的就是
axios的post传参问题了，有困扰的可以去这里看看我就是照这个解决的

---

跨域问题

上面的login.vue还有一个很重要的问题就是跨域
跨域需要在你的项目目录下找到config/index.js
里面的proxyTable是专门解决跨域问题的

---

通过sessionStorage本地存储解决Vuex刷新数据丢失问题

接下来应用sessionStorage 和 Vuex 结合进行用户信息的保存，
sessionStorage是防止Vuex保存完数据，页面刷新数据丢失问题的

在/src/文件夹下新建一个Vuex文件夹,里面新建4个js文件，分别是
stort.js

import Vue from 'vue'
import Vuex from 'vuex'

import * as getters from './getters'
import * as mutations from './mutations'
import * as actions from './actions'

Vue.use(Vuex)

const store = new Vuex.Store({
    //定义状态
    state:{
        currentUser:null,//当前用户
        isLogin:false,//判断当前用户是否已经登录
        token:""//保存用户登录后持有的token。实际上token也可以不保存在vuex中，因为vuex是一个状态管理器而非一个存储工具。我在axios的headers里是直接用的sessionStorage里的token。这里没有用
    },
    getters,
    mutations,
    actions
    
})

export default store

mutations.js

//更改用户状态信息

export const userStatus = (state,user)=>{
    if(user){
        state.currentUser = user
        state.isLogin = true
    }else if(user == null){
        //登出的时候，清空sessionStorage里的东西
        sessionStorage.setItem("user",null);
        
        state.currentUser = null;
        state.isLogin = false;
        
    }
}

getters.js

export const currentUser = state => state.currentUser
export const isLogin = state => state.isLogin

actions.js

//应用mutation

export const setUser = ({commit},user) => {
    commit("userStatus",user);
}

login添加内容，进行本地保存和Vuex保存
在login.vue 头部引入

import store from '../vuex/store.js'

然后在下面进行保存

---

**

用户的登录/登出功能实现

首页index.js

---

main.js的配置

---

最后的运行
在项目根目录下运行启动项目

npm run dev

在项目根目录下/server下运行服务器

node app.js