Vue笔记-Nuxt.js与Mongodb在项目中的使用

目录

Nuxt.js

安装

路由示例

模板示例

异步数据示例

Vuex示例

Mongodb安装与运行

Moogoose

---

Nuxt.js

安装

1. 通过vue init安装终端执行：vue init nuxt-community/koa-template name
2. 到该目录并安装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

路由示例

1. nuxt.js自动路由，创建在pages下通过组件名访问网址

模板示例

1. 在layouts下的模板必须在template中搭载<nuxt/>（其位置就是page组件中渲染的位置）,才能与page中的组件关联
2. pages中的组件必须在引入模板才能使模板渲染

<script>

export default {

//模板使用

layout:'search'//写layouts中的模板名

}

</script>

注：全局CSS，nuxt.cpnfig.js中添加

异步数据示例

1. 安装koa-router模块：npm i koa-router
2. 安装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

1. 在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//导出

1. 搭载接口，在server下的index.js中：

import cityInterface from './interface/city.js'// 引进路由

app.use(cityInterface.routes()).use(cityInterface.allowedMethods())// 路由使用

1. 在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}

}

},

1. 展示传送数据：

<!-- 循环数据 -->

<li v-for="(item,idx) in list" :key="idx">{{item}}</li>

Vuex示例

1. 在项目根目录创建store文件夹(必须是store),并在下面创建模块文件夹：modules以及index.js,
2. 在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

}

1. 在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//导出

1. 在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

1. 安装包：npm i moogoose
2. 创建文件:dbs/config.js

module.exports = {

dbs: 'mongodb://127.0.0.1:27017/dbs'//新建数据库dbs

}

1. 创建模型：dbs/models/person.js

const mongoose = require('mongoose')//加载包

//定义表

let personSchema = new mongoose.Schema({name: String, age: Number})

 

module.exports = mongoose.model('Person', personSchema)//输出

1. 配置链接在app.js中

//数据库配置

const mongoose = require('mongoose')

const dbConfig = require('./dbs/config')

//数据库链接

mongoose.connect(dbConfig.dbs,{

useNewUrlParser:true

})

1. 在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

}

})