vue学习总结七(做后台管理系统5-1)

一.准备项目.

先clone项目素材,地址:
https://github.com/huanggengzhong/back-manager-system

1.将 API Server 部署到本地

1. 创建一个名为 itcast 的数据库
2. 将 itcast.sql 导入 itcast 数据库中(导入打开时文件夹字符集记得写默认的utf-8),开启数据库
3. 解压 api-server.zip
4. 运行解压包里的bat,运行后自动会出来黑窗,
5. 测试接口可以用postMan即可

如下图则成功(测试账号admin,密码:123456)

2.创建仓库,并上传到远程,命令如下

-f是强行的意思.

二.开始项目

0.创建项目:(用脚手架3.0创建)

cnpm install -g @vue/cli
vue create manager

1.安装element-ui

cnpm i element-ui -S

2.引入element-ui方式

//引入element-ui
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
// import Vue from 'vue';//默认有
// import App from './App.vue';//默认有
// new Vue({
//   el: '#app',
//   render: h => h(App)
// });//默认有

解释render上面的写法:(在vue1.0中直接写components:{App})

3.开始登录页布局

a.在components文件夹增加一个longin.vue登录组件,样式如下:

<template>
  <!-- 登录容器 -->
  <div class="login-container">
    <!-- 表单容器 -->
    <div class="form-container">
      <h2>用户登录</h2>
      <!-- ref vue提供的属性 让我们可以给dom元素起名字 -->
      <el-form
        label-position="top"
        label-width="80px"
        ref="formData"
        :rules="rules"
        :model="formData"
      >
        <el-form-item label="用户名" prop="username">
          <el-input v-model="formData.username"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input type="password" v-model="formData.password"></el-input>
        </el-form-item>
        <!-- login-btn 自定义类名 避免跟默认冲突 -->
        <el-button class="login-btn" @click="submitForm('formData')" type="success">用户登录</el-button>
      </el-form>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      // 表单数据
      formData: {
        username: "",
        password: ""
      },
      // 表单验证规则
      rules: {
        username: [
          // required :必须
          // message: 提示信息
          // trigger: 触发时机
          // min:最短
          // max:最常
          { required: true, message: "请输入用户名", trigger: "change" },
          {
            min: 3,
            max: 10,
            message: "长度在 3 到 10 个字符",
            trigger: "change"
          }
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "change" },
          { min: 6, message: "哥们,你密码太短了吧", trigger: "change" }
        ]
      }
    };
  },
  // 方法
  methods: {
    submitForm(formName) {
    
    }
  }
};
</script>


<style lang="scss">
.login-container {
  background-color: #324152;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  .form-container {
    background-color: white;
    width: 580px;
    padding: 40px;
    box-sizing: border-box;
    border-radius: 10px;
  }
  .login-btn {
    width: 100%;
  }
}
</style>

b.安装路由

cnpm install vue-router --save

c.在src/lib/router.js里封装路由规则,并在main.js引入路由

src/lib/router.jsl里规则:(抽取路由规则建立单独文件,重要)

// 导入Vue
import Vue from 'vue';
// 导入路由
import VueRouter from 'vue-router';
// 注册插件
Vue.use(VueRouter);

// 导入路由管理的组件
import login from '../components/login.vue';
import main from '../components/main.vue';

// 写规则
let routes = [
  // 登录页
  {
    path:'/login',
    component:login
  },
  // 主页
  {
    path:'/',
    component:main
  }
]

// 实例化对象
let router = new VueRouter({
  routes
})

// 暴露出去
export default router;

main.js:

在App.vue简化为如下:

<template>
<router-view></router-view>
</template>
<script>
export default {
  name: 'app', 
}
</script>

<style>
html,body{
  height: 100%;
  margin: 0 auto;
  padding: 0 auto;
}
</style>

4.css预处理使用(Sass开发),

1.安装:

cnpm install -D sass-loader node-sass

2.引入:记得引入是写在style里:lang=‘scss’,特别注意是写scss,不是sass.

<style lang="scss">
.login-container {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  /* align-items:副轴方向居中 */
  background-color: #324152;
  .form-container {
    width: 580px;
    background-color: #ffffff;
    padding: 20px;
    border-radius: 10px;
  }
}
</style>

sass资料:https://cli.vuejs.org/zh/guide/css.html#预处理器

5.因为高度不能100%,所以再建一个src/assets/base.css公共样式,在main.js中引入即可

完成后静态页面效果如下:

2019年4月2日01:18:23未完继续

6.添加登录验证逻辑代码

<script>
export default {
  name: 'login',
  data(){
    return {
    formData: {
      username: '',
      password: ''
    },
    // 验证表单规则
    rules:{
      username: [
            { required: true, message: '请输入用户名', trigger: 'change' },
            { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'change' }
          ],
           password: [
            { required: true, message: '请输入密码', trigger: 'change' },
            { min: 6, message: '密码不能少于6位哦', trigger: 'change' }
          ],

    }
  }
  },
  methods: {//这是element官网的验证思路
     submitForm(formData) {
        this.$refs[formData].validate((valid) => {
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
  },
}
</script>

三.使用axios自定义插件请求数据

1.安装axios:

cnpm i axios --save

2.写一个自定义Vue插件

1.新建lib文件夹(里面保存js文件),新建一个vue-axios.js文件,在这个文件里写代码:

或者上面也可以改为axios原型化,操作如下:(比插件化逼格低一点点)

2.在main.js里导入自己写的axios自定义插件,并use一下,这样在所有的组件中都可以用this.$axios

import VueAxios from './lib/vue-axios';
use(VueAxios);

总结:(很重要)
1.抽取路由配置和axios请求:
我们抽取了aixos请求和router配置信息在单独的一个文件里,然后在main.js里面全局引用,这样在其它子组件都可以使用aixos和路由;
2.布局和表单验证:
在登录界面,我们使用element-ui进行布局和表单验证,同时给表单增加一个ref属性,在登录提交时把ref名传进去,这样我们就可以使用this.$refs[ref名]来获取form表单对应的dom元素,获取dom元素后用element-ui自带的vilidate()方法中的函数判断参数值是否为true,如果是true说明表单验证通过;表单验证通过之后我们接着发送axios登录请求.
3.发送登录请求判断逻辑:
传入参数(参数的获取方式使用双向数据绑定input标签,用this.双向数据名获取),发送请求,后台会返回用户登录的token令牌值和状态码,我们通过状态码是否200来判断是否登录成功,如果登录成功我们就把携带的token令牌用缓存存起来,以便登录之后的数据常驻,最后使用编程式导航跳转到首页,如果不成功提示用户就好.