目录
Nuxt.js
安装
- 通过vue init安装终端执行:vue init nuxt-community/koa-template name
- 到该目录并安装npm:cd nuxt-learn,npm install
注:若npm run dev报错:
更新包:npm install backpack-core@0.7.0 --save-dev
若再执行npm run dev,编译能成功,但是客户端运行报错
在nuxt.config.js里找到eslint-loader将ctx.isClient改成ctx.Client
注2:若打开代码报错可能是eslint问题,安装npm i eslint-plugin-html@^3
路由示例
- nuxt.js自动路由,创建在pages下通过组件名访问网址
模板示例
- 在layouts下的模板必须在template中搭载<nuxt/>(其位置就是page组件中渲染的位置),才能与page中的组件关联
- pages中的组件必须在引入模板才能使模板渲染
<script>
export default {
//模板使用
layout:'search'//写layouts中的模板名
}
</script>
注:全局CSS,nuxt.cpnfig.js中添加
异步数据示例
- 安装koa-router模块:npm i koa-router
- 安装axios模块:npm i axios
注:若提示:npm WARN uglifyjs-webpack-plugin@0.4.6 requires a peer of webpack@^1.9 || ^2 || ^2.1.0-beta || ^2.2.0-rc || ^3.0.0 but none is installed. You must install peer dependencies yourself
需要更新插件:npm i -D uglifyjs-webpack-plugin@2.2.0
- 在server中创建interface文件夹并创建city.js,在里面新建路由接口
import Router from 'koa-router'//事先终端加载插件
// 新建接口
const router = new Router({
prefix: '/city' // 前缀city,访问在/city/下
})
router.get('/list', async (ctx) => {//异步传数据在list上
ctx.body = {
list: ['杭州', '温州']
}
})
export default router//导出
- 搭载接口,在server下的index.js中:
import cityInterface from './interface/city.js'// 引进路由
app.use(cityInterface.routes()).use(cityInterface.allowedMethods())// 路由使用
- 在page=>search.vue中异步传送数据
import axios from 'axios'//传送数据,事先终端搭载axios
在export default中:
data() {
return {
list: []
}
},
//异步传数据
// async mounted() {//在服务器端不执行的,在浏览器中执行渲染
// let self = this
// let {status, data:{list}} = await axios.get('/city/list')//返回数据
// if (status===200) {
// self.list = list
// }
// },
async asyncData() {//处理组件数据,在服务器端执行的,并下发,fetch处理Vuex相关
let {status, data:{list}} = await axios.get('http://localhost:3000/city/list')//返回数据
if (status===200) {
return {list}
}
},
- 展示传送数据:
<!-- 循环数据 -->
<li v-for="(item,idx) in list" :key="idx">{{item}}</li>
Vuex示例
- 在项目根目录创建store文件夹(必须是store),并在下面创建模块文件夹:modules以及index.js,
- 在module中创建若干模块JS,例:
const state = () => ({
list: ['a','b']//数据
})
const mutations = {
add(state, text){
state.list.push(text)//方法
}
}
const actions = {
add: ({commit},text)=> {
commit('add',text)//提交
}
}
export default{
namespaced: true,//开启命名空间
state,
mutations,
actions
}
- 在index中整合模块:
import Vue from 'vue'
import Vuex from 'vuex'
import city from './modules/city'
import navbar from './modules/navbar'
//模块通过Vuex整合
Vue.use(Vuex)
const store = () => new Vuex.Store({
modules: {
city,
navbar
},
actions: {
}
})
export default store//导出
- 在search.vue 中展示数据:
<!-- Vuex数据传送 city:模块名,list:数据-->
<li v-for="(item,idx) in $store.state.city.list" :key="idx">{{item}}</li>
Mongodb安装与运行
安装:网上有非常多,随便搜一下就好了。
RoBT可视化工具安装
启动服务:mongod,检验链接端口localhost:27017
数据导入:mongoimport -d student -c provinces provinces.dat
Moogoose
- 安装包:npm i moogoose
- 创建文件:dbs/config.js
module.exports = {
dbs: 'mongodb://127.0.0.1:27017/dbs'//新建数据库dbs
}
- 创建模型:dbs/models/person.js
const mongoose = require('mongoose')//加载包
//定义表
let personSchema = new mongoose.Schema({name: String, age: Number})
module.exports = mongoose.model('Person', personSchema)//输出
- 配置链接在app.js中
//数据库配置
const mongoose = require('mongoose')
const dbConfig = require('./dbs/config')
//数据库链接
mongoose.connect(dbConfig.dbs,{
useNewUrlParser:true
})
- 在routes.js中实现对数据的增删改查
const Person = require('../dbs/models/person')
//moogodb数据增删改查
//终端输入 curl -d 'name=zou1&age=12' http://localhost:3000/users/addPerson; 测试,-d为post方式请求
router.post('/addPerson', async function(ctx) {
const person = new Person({name: ctx.request.body.name, age: ctx.request.body.age})
let code
try {
await person.save()
code = 0
} catch (e) {
code = -1
}
ctx.body = {
code: code
}
})
//curl -d 'name=zou1' http://localhost:3000/users/getPerson
router.post('/getPerson', async function(ctx) {
const result = await Person.findOne({name: ctx.request.body.name})
const results = await Person.find({name: ctx.request.body.name})
ctx.body = {
code: 0,
result,
results
}
})
//curl -d 'name=zou1&age=44' http://localhost:3000/users/updatePerson
router.post('/updatePerson',async function(ctx){
const result = await Person.where({
name: ctx.request.body.name
}).update({
age: ctx.request.body.age
})
ctx.body={
code:0
}
})
//curl -d 'name=zou12' http://localhost:3000/users/removePerson
router.post('/removePerson',async function(ctx){
const result = await Person.where({
name: ctx.request.body.name
}).remove()
ctx.body={
code:0
}
})