前后端分离开发VUE部分

一、创建VUe项目（PS：其实使用VUE UI方式更为简单直接）：

1、基于脚手架，使用管理员命令创建vue项目：

如：

2、引入element组件：

使用管理员权限为当前项目安装：

然后再main.js项目中引入：

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

3、安装VUE router：

这一步在脚手架创建vue项目时，可自动安装，也可以手动安装。下面是手动安装方式。注意版本问题。

同样需要引入vue-router

二、路由router的使用：

1、基本流程：

构建目录，在组件目录中，创建组件文件，并且将其export（暴露）。

然后在router文件夹中创建所需的路由文件xx.js，刚刚创建的组件和所需资源引入，并且定义路由。

在主文件main.js中引入刚刚的路由文件router。

然后就可以在页面文件xx.vue中使用组件和路由了。router-link负责跳转链接，而router-view负责控制组件的显示。

2、路由传参：

先在路由文件xx.js中将路径通过“:xx”传递

然后就可以在xx.vue文件中，进行路由拼接和跳转

最后在组件文件xx.vue用这样的方式获取到参数。

3、params传参：

比如对于这样的路由，我在传参想不行进行"/main/:id"这样的路由拼接了，可以将“/main”改成

{name: 'main', params: {name: this.form.name}}

其中前半部分是路由，后半部分利用params进行传参。可以通过这样的语句获取传递值。

$route.params.name

4、登录

4.1、直接sessionStorages实现简单登录判断

在登录文件xx.vue中，将登录表单成功提交时，设置'islogin'（自定义）。

sessionStorage.setItem('islogin','true');

然后再main.js文件中使用router.beforeEach((to, from, next)=>{ ......})函数，在路由跳转前进行登录状态判断和相关处理。

router.beforeEach((to, from, next) => {
  let islogin = sessionStorage.getItem('islogin');
//注销
  if (to.path == '/logout') {
    //清空
    sessionStorage.clear();
    //跳转到登录页面
    next({ path: '/login' });
  } else if (to.path == '/login') {
 //判断是否为空，不为空则跳转至首页
    if (islogin != null) {
      next({ path: '/main' });
    }
  } else if (islogin == null) {
      next({ path: '/login' });
    }
  next();
});

4.2 VUEX实现登录保持

将用户看成一个对象，创建模块文件

在文件里编写这些

const user={

    state : sessionStorage.getItem('state') ? JSON.parse(sessionStorage.getItem('state')):{
        user: {
            name: ''
        }
    },

    getters : {
        getUser(state) {
            return state.user;
        }
    },

    mutations : {
        updateUser(state, user) {
            state.user = user;
        }
    },

    actions : {
        asyncUpdateUser(context, user) {
            context.commit('updateUser', user);
            // 更新后保存到 sessionStorage
            sessionStorage.setItem('state', JSON.stringify(context.state));
        }
    }

}

export default user;

再创建文件xx.js,引入VueX和刚刚的模块。

import Vue from 'vue';
import Vuex from 'vuex';
import user from "@/store/modules/user";
Vue.use(Vuex);

export default new Vuex.Store({
    modules:{
        user
    }
});

在登录文件xx.vue中

if (valid) {
          sessionStorage.setItem('islogin','true');

//将已通过验证的表单数据保存到sessionStorage中
          this.$store.dispatch("asyncUpdateUser",{name:this.form.name})
          this.$router.push({name: 'main', params: {name: this.form.name}});

在主页文件xx.vue中用这样的方式去获取到用户对象的信息

 <span>{{$store.getters.getUser.name}}</span>

三、vite创建项目于更好

npm create vue@latest