每天进步一点点---------畅购商城第二天 前台框架搭建

使用前后端分离开发，涉及Vue+ElementUI+Axios，做为专业白嫖党和完全的小白，必然边学边练，首先来一把学习资料：
最重要和最关键的学习资料，必然是官网了：
Vue官网
ElemetnUI官网
Axios官网
官网如果有不懂的可以在下面的课程中查漏补缺，codewhy的视频有项目结构和规范的部分内容
《【编程不良人】适合后端编程人员的 ElementUI教程,结合SpringBoot项目案例,已完结!!!》
《最全最新Vue、Vuejs教程，从入门到精通》

项目搭建与目录

参考codeWhy的课程，项目创建过程和目录设置如下：
(1)创建项目

vue init webpack webPro
? Project name web
? Project description test
? Author XXX
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Set up unit tests Yes
? Pick a test runner jest
? Setup e2e tests with Nightwatch? No
? Should we run `npm install` for you after the project has been created? (recommended) npm

（2）创建工程目录
先创建目录结构，不做任何操作，

src下的目录为
	assets   //图片等资源
		css
		img
	components  // 组件
		common   //公共组件
		content
	network    // 前后端交互
		utils
		
	router     // 路由
	store     // 
	view   //页面

（3）引入ElementUI
参考自ElementUI官网->安装和快速上手章节，务必需要引入element-ui的index.css，否则样式将无法生效。

npm i element-ui -S
在main.js中引入下面的内容
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';

Vue.use(ElementUI);

（4）引入Axios和基本包

npm install axios --save-dev

Vue封装Axios，参考自coderWhy和一个大神的封装过程
在/network/utils目录下创建http.js和request.js，具体代码可以查看大神的博客。

基本验证

后台已经搭建goods服务，实现了brand的增删改查，使用brand的查和增做一个简单验证，验证样式为ElementUI表格和表单

brands.vue创建如下，代码还是十分的ugly，后序优化。

<template>
  <div class="brands">
    <el-button type="primary" icon="el-icon-search" @click="getAllbrands">查询</el-button>
    <el-table
      :data="brandsList"
      style="width: 100%"
      align="center"
      highlight-current-row
      :row-class-name="tableRowClassName">
      <el-table-column type="selected" width="55"></el-table-column>
      <el-table-column
        prop="image"
        label="商标"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="品牌"
        width="180">
      </el-table-column>
      <el-table-column
        prop="letter"
        label="首字母"
        width="180">
      </el-table-column>
      <el-table-column
        prop="seq"
        label="排序"
        width="180">
      </el-table-column>
      <el-table-column
        prop="operation"
        label="操作"
        width="300">
        <template slot-scope="scope">　　
          <el-button type="info" icon="el-icon-delete" @click="deleteUser(scope.row.phone)"></el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-form ref="brandForm" :model="brandForm" label-width="80px">
      <el-form-item label="品牌名称">
        <el-input v-model="brandForm.name"></el-input>
      </el-form-item>
      <el-form-item label="品牌图片">
        <el-input v-model="brandForm.img"></el-input>
      </el-form-item>
      <el-form-item label="首字母">
        <el-input v-model="brandForm.letter"></el-input>
      </el-form-item>
      <el-form-item label="品牌排序">
        <el-input v-model="brandForm.seq"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="addBrands(brandForm)">立即创建</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<style>
  .el-table .warning-row {
    background: oldlace;
  }

  .el-table .success-row {
    background: #f0f9eb;
  }
</style>

<script>
  import {getGoodsListAllAPI,addBrandAPI} from '@/network/goods'

  export default {
    name: "goods",
    methods: {
      tableRowClassName({row, rowIndex}) {
        if (rowIndex === 1) {
          return 'warning-row';
        } else if (rowIndex === 3) {
          return 'success-row';
        }
        return '';
      },
      getAllbrands() {
        getGoodsListAllAPI().then(res => {
          let brands = []
          if (res.status == "200") {
            brands = res.data.data;
            console.log(brands)
          }
          this.brandsList = brands;
          console.log(this.brandsList)
        }).catch(
          err => console.log(err)
        )
      },
      addBrands(brandForm){
        console.log(brandForm)
        addBrandAPI(brandForm).then(res => console.log(res)).catch(e => console.log(e));
      }
    },
    data() {
      return {
        brandsList: [],
        brandForm:{
          name:'',
          img:'',
          letter:'',
          seq:''
        }
      }
    }
  }
</script>

部署验证

执行npm run build,会在dist目录多出前台的静态文件，在linux虚拟机中安装nginx

wget http://nginx.org/download/nginx-1.13.7.tar.gz
 tar -xvf nginx-1.13.7.tar.gz
 ./configure
 make
 make install
 whereis nginx  // 查看nginx的安装目录

nginx安装完成后，远程查看网址如下：

将静态文件放入到html目录，重新启动nginx后，查看页面如下：

验证后，发现可以生效。

FAQ

（1）未引入ElementUI的index.css样式，造成ElementUI部分组件不正确，样式不正确
（2）新建vue中template中必须加div，否则多个标签时会报需要同一个根的错误
（3）ElementUI的model属性为数据对象，还未使用rules进行校验

（4）Axios已经配置了BaseURL和timeout，可以直接使用，遇到postMan可以调通，但是遇到token验证，无法调通的情况，因此request.js先去掉token部分