第三篇-后端人员学习vue(项目实战)

1.前言

上篇我们大家搭建好了vue的环境，那么我们赶紧上车吧。（我是看慕课网的高仿饿了么vue.js视频）本篇不会将饿了么都实现，我们干后端的也没必要说把页面写的多好看，我们要搞清楚一下东西：
1.vue项目开发流程
2.项目入口在哪
3.路由-对应页面模板
4.数据的双向绑定

大概把这些东西弄清楚了，我们就可以更好的用vue来写我们的后台页面！

2.demo效果展示

这里写图片描述

思考：我们可以将老旧的后台frameset换成路由形式，根据路由的不同，让content的内容不同。

3.项目目录结构

这里写图片描述

代码下载：https://download.csdn.net/download/m0_37499059/10576883

安装依赖：npm install
运行项目：cnpm run dev
访问：http://localhost:8081

4.技术分解

1）vue mock数据(模拟后台)

目的就是请求某个url，获取json数据
这里写图片描述
项目根目录下有个data.json文件

修改webpack.dev.conf.js：
这里写图片描述

var appData = require('../data.json');
var seller = appData.seller;//获取对应本地数据
var goods = appData.goods;
var ratings = appData.ratings;
var apiRoutes = express.Router();
app.use('/api',apiRoutes);//通过路由来请求数据


devServer: 下加入以下代码
 devServer: {
    clientLogLevel: 'warning',
    historyApiFallback: {
      rewrites: [
        { from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, 'index.html') },
      ],
    },
    hot: true,
    contentBase: false, // since we use CopyWebpackPlugin.
    compress: true,
    host: HOST || config.dev.host,
    port: PORT || config.dev.port,
    open: config.dev.autoOpenBrowser,
    overlay: config.dev.errorOverlay
      ? { warnings: false, errors: true }
      : false,
    publicPath: config.dev.assetsPublicPath,
    proxy: config.dev.proxyTable,
    quiet: true, // necessary for FriendlyErrorsPlugin
    watchOptions: {
      poll: config.dev.poll,
    },
    before(app){
    app.get('/api/seller',(req,res)=>{
      res.json({
        errno:0,
        data:seller
      })
    }),
    app.get('/api/goods', (req, res) => {
    res.json({
      errno: 0,
      data: goods
    })
  }),
  app.get('/api/ratings', (req, res) => {
    res.json({
      errno: 0,
      data: ratings
    })
  })
  }
  },

这样我们去请求/api/goods 就可以获取到json数据了。

2）写整个页面框架

App.vue

<template>
<div>
  <v-header :seller="seller"></v-header>
  <div class="tab">
    <div class="tab-item">
      <router-link to="/goods">商品</router-link>
    </div>
    <div class="tab-item">
      <router-link to="/rattings">评论</router-link>
    </div>
    <div class="tab-item">
      <router-link to="/seller">商家</router-link>
    </div>
  </div>
  <router-view></router-view>
</div>
</template>

<script type="text/ecmascript-6">
    import header from './components/header/header.vue'
  const ERR_OK = 0

    export default{
    data() {
       return {
         seller: {}
       } 
    },
    created() {
      this.$http.get('/api/seller').then((response)=>{
          response = response.body
          if (response.errno === ERR_OK) {
              this.seller = response.data
          }
      });
    },
        components:{
            'v-header':header
        }
    };
</script>

<style lang="stylus" rel="stylesheet/stylus">
@import "./common/stylus/index.styl"
  .tab
    display: flex
    width: 100%
    height: 40px
    line-height: 40px
    border-1px(rgba(7,17,27,0.1))
    .tab-item
      flex: 1
      text-align: center
      & > a
        display: block
        font-size:14px
        color: rgb(77,85,93)
  .router-link-active
    color:blue
</style>

路由配置
import Vue from 'vue'
import Router from 'vue-router'
import VueResource from 'vue-resource'
import goods from '@/components/goods/goods'
import rattings from '@/components/rattings/rattings'
import seller from '@/components/seller/seller'
Vue.use(Router)
Vue.use(VueResource)
export default new Router({
  routes: [

    {path: '/', redirect: 'goods'},
    {
      path: '/goods',
      component: goods
    },
    {
        path: '/rattings',
        component: rattings
    },
    {
        path: '/seller',
        component: seller
    }
  ]
})

扩充知识

1.去学一下stylus
2.vue中怎么用组件
3.vue中怎么mock数据