商城3 vue

1.全局安装webpack

npm install webpack -g

 

2.全局安装vue脚手架

npm install -g @vue/cli-init

npm i -g @vue/cli-init

 

3.初始化项目  新建 vue-demo文件夹   然后 cmd

vue init webpack vue-demo 

 

4.路由跳转

// 1.跳转到首页 1024
this.$router.push({ name: this.$config.homeName  });//name:'Home'

// 2.跳转到首页  renren
this.$router.replace({ name: 'home' })

 

5.调用后端接口

(1) 新建api文件夹下的login.js文件

import { postAxios, getAxios } from '@/utils/httpRequest';
export const loginApi = {
  // 登录
  login: data => {
    return postAxios('/renren-fast/sys/login', data);
  },
}

 (2) 在vue文件引入js文件

import { loginApi } from '@/api/login';

(3)在vue文件，显示页面

（1）  
save() {
        this.$refs['form'].validate(valid => {
          if (valid) {
            if (this.isUpdate) {
              this.update();
            } else {
              this.add();
            }
          } else {
            this.$Message.error('参数验证错误，请仔细填写表单数据!');
          }
        });
      },
  async add() {
        this.$Spin.show();
        let res = await customersApi.addCustomers(this.form);
        this.$Message.success(res.msg);
        this.$Spin.hide();
        this.resetForm();
        this.$emit('on-form-close');
      },
  async update() {
        this.$Spin.show();
        let res = await customersApi.updateCustomers(this.form);
        this.$Message.success(res.msg);
        this.$Spin.hide();
        this.resetForm();
        this.$emit('on-form-close');
   }

（2）

async loginSuccess(){
  try {
    let params = {
      'username': this.dataForm.userName,
      'password': this.dataForm.password,
      'uuid': this.dataForm.uuid,
      'captcha': this.dataForm.captcha
    }
    let newVar = await loginApi.login(params);
    let data = newVar.data;
    if (newVar.data && newVar.data.code === 0) {
      this.$cookie.set('token', data.token)
      this.$router.replace({name: 'home'})
    } else {
      this.getCaptcha()
      this.$message.error(data.msg)
    }
  } catch (e) {
    this.getCaptcha()
    this.$message.error(data.msg)
  }
},

 

调用后台接口第二种方法

 // this.$http({
        //   url: this.$http.adornUrl('/sys/user/list'),
        //   method: 'get',
        //   params: this.$http.adornParams({
        //     'page': this.pageIndex,
        //     'limit': this.pageSize,
        //     'username': this.dataForm.userName
        //   })
        // }).then(({data}) => {
        //   if (data && data.code === 0) {
        //     this.dataList = data.page.list
        //     this.totalPage = data.page.totalCount
        //   } else {
        //     this.dataList = []
        //     this.totalPage = 0
        //   }
        //   this.dataListLoading = false
        // })