一点车（vue项目）

使用vue-cli手脚架

没安装的安装一下：npm i vue-cli -g
npm不能用的先去安装一下node
建议使用cnpm，npm太慢
格式：vue init webpack projectName

• vue init webpack ydc初始化项目
• cnpm i 安装依赖

运行

cnpm run start - 开发阶段
cnpm run build - 发布阶段

准备：

• 静态页面下载
• 在config/index.js26useEslint改成false

从静态页面拆组件

header

./src/components/header.vue
随便找个静态页面把头摘下来
把静态页面文件夹下面的css和image拷过去，放在src/assets，在src/main里面引入

import './assets/css/core.css'
import './assets/css/icon.css'

api

cnpm init -y
cnpm i koa koa-static koa-router mysql co-mysql -D
写一个服务器

const Koa = require('koa')
let server = new Koa();
server.listen(8888)

到这步，可以通过访问localhost:8888进行访问，会得到Not Found的结果，说明服务器已经搭建
写一个接口

const Koa = require('koa')
const Router = require('koa-router')
let router = new Router();
router.get('/a', ctx => {
    ctx.body = 'hh'
})
let server = new Koa();
server.listen(8888)
server.use(router.routes())

通过访问localhost:8888//a 能得到hh，说明已经能写接口了，我们继续完善

const Koa = require('koa')
const Router = require('koa-router')
let router = new Router();
router.get('/api/account_catalog', ctx => {
    ctx.body = ['娱乐', '汽车', '情感', '美食', '时尚']
})
let server = new Koa();
server.listen(8888)
server.use(router.routes())

image.png

写完接口，我们要去请求一下

data(){
  catalogs:[]
},
async created() {
    let res = await fetch("http://localhost:8888/api/account_catalog");
    let arr = await res.json();
    this.catalogs = arr;
  },

说跨域了

image.png

在server.js的server.listen(8888)后面补上这句

server.use(async (ctx,next)=>{
  ctx.set('Access-Control-Allow-Origin','*');
  await next();
})

重启服务，成功，到这里就能数据交互了，我们继续优化一下
在服务端把api放到routers/api
./routers/api/index.js

const Router = require('koa-router');
let router = new Router();
router.get('/account_catalog', async ctx => {
    ctx.body = ['娱乐', '汽车', '情感', '美食', '时尚']
})
module.exports = router.routes();

./server.js

const Koa = require('koa');
const Router = require('koa-router');

let server = new Koa();

server.listen(8888)
let router = new Router();
router.use('/api', require('./routers/api'))
server.use(async(ctx, next) => {
    ctx.set('Access-Control-Allow-Origin', '*');
    await next();
})
server.use(router.routes())

我们在开发阶段请求的是8888，但是上线后地址就不是这样了，因此我们要做个配置，当开发阶段使用8888，上线后使用另一个地址
在前端
./src/config.js

let server = ''
if (process.env.NOSE_ENV = 'development') {
    server = 'http://localhost:8888/'
} else {
    server = ''
}
export const SERVER = server

使用

import {SERVER} from '@/config'
请求地址为SERVER+'xxx'

使用数据库进行查询数据
./server.js

const mysql = require('mysql')
const co = require('co-mysql')
let conn = mysql.createPool({host:'localhost', user: 'root', password: '123456',database:'ydc'});
server.context.db = co(conn);

./routers/api/index.js

router.get('get_province', ctx=>{
  ctx.body = await ctx.db.query("select * from province");
})
router.get('get_city/:proid',ctx=>{
  let {proid} = ctx.params;
  ctx.body = await ctx.db.query("select * from city where proID=?",proid)
})

省市联动前端
./src/pages/reg.vue

<select v-mode:"cur_pro">
  <option v-for="province in provinces" :value="province.ID">{{province.name}}</option>
</select>
<select v-if="citys" v-mode:"cur_pro">
  <option v-for="city in citys" :value="city.ID">{{city.name}}</option>
</select>


data() {
  cur_pro:'',
  cur_city:'',
  provinces: [],
  citys: null
},
async creatd(){
  //省
  {
    let res = await fetch(SERVER+'/api/get_province');
    let arr = await res.json();
    this.provinces = arr;
    this.cur_pro = arr[0].ID;
  }
  //市
  {
      let res = await fetch(SERVER+`/api/get_city${this.province[0].ID`);
      let arr = await res.json();
      this.citys = arr;
  },
  watch: {
    await async () {
      let res = await fetch(SERVER + `api/get_city${this.cur_pro}`);
      let arr = await res.json();
      this.cur_city = arr[0].ID;
    },
  },
}