vue-cli从零开始实现一个仿豆瓣app（一）

最近利用vue+nodejs+mysql实现了一个简单的仿豆瓣网站，记录一下实现的过程。

先放上github地址：https://github.com/jaminejiang/douban.git

首先是搭建框架。

项目需要安装的是node和git，这里不详细讲

快速搭建vue-cli可以按照官网的步骤：点击打开链接

# 全局安装 vue-cli
$ npm install --global vue-cli
# 创建一个基于 webpack 模板的新项目
$ vue init webpack my-project
# 安装依赖，走你
$ cd my-project
$ npm install
$ npm run dev

webpack帮我们打包好了，简单的看一下生成的\build\webpack.base.conf.js中的内容

entry: {

app: './src/main.js'

output: {

path: config.build.assetsRoot,

filename: '[name].js',

publicPath: process.env.NODE_ENV === 'production'

? config.build.assetsPublicPath

: config.dev.assetsPublicPath

entry规定了入口为main.js，通过这个入口index.html页面就可以利用main.js渲染App.vue.

接下来搭建后台服务器部分，以实现操作数据库等。

在根目录创建一个server文件夹，文件夹中api文件夹实现业务逻辑，db.js封装数据库的信息，包括用户名密码等，sqlMap实现映射sql语句，而index.js则是服务器的入口。

用git在server文件夹上git bash，引入依赖的包,包括最终要的express和mysql,body-parser等。

之后就可以在命令行敲nodemon index启动后台服务器啦。

注意后台的端口是3000，前台是8080，这里有跨域问题。

app.listen(3000); //监听的端口号

console.log('success listen at port:3000......');

这里要设置代理与跨域,方法就是设置vue的映射表。

在config文件夹的index.js文件中，加入以下proxyTable设置

// Paths

assetsSubDirectory: 'static',

assetsPublicPath: '/',

proxyTable: {

'/api':{

target: 'http://127.0.0.1:3000/api/',

changeOrigin: true,

pathRewrite: {

'^/api': ''

}

意思就是前台请求中带有/api的地址都会映射到http://127.0.0.1:3000/api中，而在server的index.js中就可以将请求的地址与业务逻辑模块一一对应。

项目最终的映射如下：

app.use('/api/user',userApi); //到地址'/api/user'的请求将映射到userApi

app.use('/api/film',filmApi); //到地址'/api/film'的请求将映射到filmApi

app.use('/api/search',searchApi); //到地址'/api/search'的请求将映射到searchApi

到这里为止前后台的交流已经实现了。

接下来就是写个简单的登陆注册来测试一下。

登陆注册实现

无论学开发什么，最开始我都是登陆注册啊，又简单又能树立信心。

这里先讲一下router映射。

在项目的src文件夹下建一个router.js文件，用来处理前端路由。

import mainComponent from './components/mainComponent'

import userComponent from './components/userComponent'

import userIsLogin from './components/checkIsUserLogin'

import userGoToLogin from './components/loginStyle'

const routers = [

{

path:'/',

redirect:'/main',

meta:{

keepAlive:false

}

{

path:'/main',

name:'mainPage',

component:mainComponent,

meta:{

keepAlive:false

}

{

path:'/userAuthority',

name:'userPage',

component:userComponent,

meta:{

keepAlive:false

children:[

{

path:'checkUserLogin',

component:userIsLogin,

meta:{

keepAlive:false

}

{

path:'goToLogin',

component:userGoToLogin,

meta:{

keepAlive:false

}

]

export default routers

设置好router之后还要在入口文件中注册这个router

import Vue from 'vue'

import App from './App'

import vueRouter from 'vue-router'

import routers from './routers'

Vue.config.productionTip = false

Vue.use(vueRouter);

const router = new vueRouter({

mode:'history',

routes:routers

});

/* eslint-disable no-new */

new Vue({

el: '#app',

router,

render: h => h(App)

})

这个router设置一进入主界面就跳转到首页，即展示最新的电影、电视剧等

App.vue中固定了footer，footer中有两个按钮可以在首页和登陆页切换。

import Vue from 'vue'
import App from './App'
import vueRouter from 'vue-router'
import routers from './routers'Vue.config.productionTip = falseVue.use(vueRouter);
const router = new vueRouter({mode:'history',routes:routers
});/* eslint-disable no-new */
new Vue({el: '#app',router,render: h => h(App)
})

上面的userComponent就是实现登陆注册的。

登陆注册模块一跳进去先后台检查是否已经登陆，如果没有才跳转到登陆界面，否则显示用户名。这部分先跳过，直接讲登陆注册。

我是把登陆框和注册框写在一个页面，通过v-if切换，其实回过头看这里完全可以写一个组件从而实现复用，有时间再优化一下吧。

html就略过了，直接看交互部分。

引入axios，实现类似ajax功能。

import axios from 'axios'
import vue from 'vue'
vue.prototype.$axios = axios

goToLogin:function(){    //登陆请求if(!this.loginUserName||!this.loginPwd){  //请求框没有输入完整this.operateModal(1);return false;}else{var _this = this;var loginData = {'username':this.loginUserName,'password':this.loginPwd};this.$axios.post('/api/user/queryUser',loginData).then(function(res){if(res.data==-1){                //用户名不存在_this.loginUserName = '';_this.loginPwd = '';_this.operateModal(2);}else if(res.data==0){          //密码错误_this.loginPwd = '';_this.operateModal(3);}else if(res.data==1){          //登陆成功_this.operateModal(4);}}).catch(function(err){console.log(err);});}},

在server的api中建一个userApi。js文件

var models = require('../db');
var express = require('express');
var router = express.Router();
var mysql = require('mysql');
var $sql = require('../sqlMap');
var session = require('express-session');
var cookieParser = require('cookie-parser');router.use(cookieParser());
router.use(session({secret:'123456',resave: true,saveUninitialized:false})
);//连接数据库
var conn = mysql.createConnection(models.mysql);
conn.connect();//查询用户接口
router.post('/queryUser',(request,response) => {var body = request.body;var queryUser = $sql.user.query_user;conn.query(queryUser,body.username, function( err , result ){if(err){console.log(err);            //数据库操作失败}if(result[0]===undefined){response.send('-1');             //查询不到该用户名}else{if(result[0].password!==body.password){response.send('0');          //密码错误}else{request.session.sessionUserName = body.username;request.session.sessionUserId = result[0].userid;response.send('1');          //查询到该用户，登陆成功}}});
});

数据库语句和数据库设置部分就跳过，可以用navicat在数据库中手动创建几个用户信息就可以测试登陆啦。

注册部分后台代码如下：

router.post('/addUser',( request , response ) => {var body = request.body;var addUser = $sql.user.add;var query_user = $sql.user.query_user;conn.query(query_user, body.username,function( err , result){if(err){console.log(err);}if(result[0]===undefined){conn.query(addUser,[body.username,body.password],function( erradd , res){if(erradd){console.log(erradd);}if(res){request.session.sessionUserId = res.insertId;request.session.sessionUserName = body.username;response.send('1');             //插入成功}});}else{response.send('0');                  //用户已存在，插入失败}});
});

到这里就可以初步跑起来了。