第一期vue项目实践问题与收获总结

第一期vue项目实践问题与收获总结

1. 存在问题

1.1 本地静态存储信息

​ 还未实现本地静态存储用户的登录信息。此时的信息仍是储存在cookie会话缓存中。不利于全局的随时调用。(后期可以利用vuex的store实现改进)

1.2 用户权限的区分

​ 不同的用户应该拥有不同的用户权限来对后台进行管理，并且可以对用户的权限进行更改(后期还可以增加权限修改功能，以及登录时的用户权限区别)

2. 收获

2.1 路由导航守卫拦截未登录的访问

​ 只有通过登录界面的跳转才会被允许，并且要验证后台返回的token值

2.2 element-UI的使用

​ 通过element-UI提供的组件与模板可以实现一些简单项目的快速开发(ps:但从长远角度来看不如自己花点时间写一套自己的模板)

<el-form ref="loginFormRef" :model="loginForm" :rules="loginFormRules"  class="login_form" label-width="0px">
          <el-form-item prop="username">
              <el-input v-model="loginForm.username" prefix-icon="el-icon-user-solid"></el-input>
          </el-form-item>
          <el-form-item prop="password">
              <el-input v-model="loginForm.password" prefix-icon="el-icon-postcard" type="password"></el-input>
          </el-form-item>
          <el-form-item class="code" prop="code">
            <el-input  v-model="loginForm.code" size="large" type="text" placeholder="验证码: "></el-input>
          </el-form-item>  
            <img style="float:right; width:150px;height:40px" @click="replace" :src="imgCode" alt="">
          <el-form-item class="btns">
              <el-button type="primary" @click="login" round >登录</el-button>
              <el-button type="register" @click="register" round>注册</el-button>
          </el-form-item>
</el-form>

2.3 md5方式对密码加密

​ 为了增加用户信息的安全度需要使用到md5对用户密码进行加密，使用npm install --save js-md5命令安装依赖，之后在需要使用的项目文件中导入import md5 from ‘js-md5’;即可使用

import {strToMd5} from '../util/md5.js'导入md5方法
this.loginForm.password=strToMd5(this.loginForm.password)//使用md5方法加密

2.4 router路由实现页面跳转

​ 通过配置路由实现页面之间的转换，以及使用嵌套路由，实现页面的嵌套显示

import Router from 'vue-router'
import Login from '../components/Login'
import Home from '../components/Home'
import Register from '../components/Register'
import Users from '../components/role/Users.vue'
import Error404 from '../components/Error404'
import welcome from '../components/welcome'
import Chpassword from '../components/role/Chpassword.vue'
Vue.use(Router);
const router = new Router({
    routes: [
        {
            path:'/login',
            name: 'login',
            component:Login
        },
        {
            path: '/',
            redirect: '/login'
        },
        {
            path:'/home',
            component:Home,
            children:
                [
                    {
                        path:'users',
                        component:Users
                    },
                    {
                        path:'welcome',
                        component:welcome
                    },
                    {
                        path:'chpassword',
                        component:Chpassword
                    },
                ]
            
        },
        {
            path:'/register',
            component:Register,
        },
        {
            // *号表示剩余的全部情况
            path:'*',
            component:Error404,
        },
       
    ]
})

2.5 axios向后端发起请求

​ 通过异步请求向后端提交数据，并接受后端返回的数据实现登录请求

login()
      {
        this.$refs.loginFormRef.validate(async valid=> {
          if(!valid) return;
          const {data:res}=await this.$http.post("login",this.loginForm);
          if(res.code!=200)return this.$message.error('登录失败！');
          this.$message.success('登录成功！');
          window.sessionStorage.setItem('token',res.data);
          window.sessionStorage.setItem('password',this.loginForm.password);
          this.$router.push("/home/welcome");
        });
      },

2.6 vue项目目录结构

build 文件是项目构建 webpack 相关代码

config 是配置目录，包括端口号等

node_modules 是npm 加载的项目依赖

src 是我们需要开发的目录，包含的几个目录及文件：

​ assets：放置图片

​ components：放置组件文件

​ App.vue：项目入口文件（可以将组件写在此处，而不使用 components 目录）

​ main.js：项目的核心文件

static 是静态资源目录，如图片、字体等

.xxxx 都是配置文件，包括语法配置、git配置等

index.html 是首页入口文件

package.json 是项目配置文件

README.md 项目的说明文档

package.json 中的 dependencies 是指定了项目运行所依赖的模块

package.json 中的 devDependencies 是指定了项目开发所需要的模块

3. 个人总结

​ 以上的这些问题与收获都是我在第一次vue项目中遇到的，本人将这些较为直观的问题进行了简单的总结，还有一些其他的问题与收获不便于描述，还未列出。但通过这一次的实践还是对我有很大的帮助，如果在以后的开发实践中再遇到这些类似的问题就可以轻易的解决了。而那些还未遇到的问题我相信在以后的实践中也都会依次解决掉。在项目开发的过程中，最重要的就是个人经验的总结与感悟，这些都是每一个项目带给我们的最大的收获。

初次完结撒花！！！

最后附上项目git地址 vueproject