Skip to content

Latest commit

 

History

History
165 lines (126 loc) · 3.5 KB

项目笔记.md

File metadata and controls

165 lines (126 loc) · 3.5 KB

(1).关于vue-socket.io的开发模式安装笔记。

首先安装express mongodb 还有一些前后端的组建 这些就不一一对应了

在后端中安装依赖 npm install socket.io --save

1.然后在index.js中引用socket 引用方法:

const express = require('express')
const app = express()
const http = require('http').Serve(app)
const io = require('socket.io').http
http.listen(port,callback)

2.进行socket的连接:

io.on('connection',socket=>{
//接收chat数据接口
socket.on('chat',data=>{callback,或者触发相关的方法})
//发送聊天数据
socket.emit('chat',data)

})

vue客户端的使用,减少以后的造轮子

3.首先安装依赖:vue-socket.io

在main.js中引入
import VueSocketIO from 'vue-socket.io'
//全局引用vue
vue.use(new VueSockeIO({
connection:'服务端地址',
//vuex:{},
//debug:ture,
}))


4.实际在vue页面中的使用方法

//发送到服务器方法
this.$socket.emit('chat',data)
//接收服务端的数据
this.sockets.subscribe('chat',data=>{
//触发接收后的放法
})

(2).mongodb在express中的安装使用

1.index.js中引用mongodb

const mongoose = require('mongoose')

2.新建db.js进行mongoose连接地址的配置

//方便连接接口的修改所以新建文件以导出的形式进行,
module.exports ={
mongoURL:'mongodb://127.0.0.1:123/name'
}

3.在index.js中进行数据库的引用

//首先将db.js文件夹引入到index中,
const db = require('./db').mongoURL
//然后连接数据库
mongoose.connect(db,
{useNewUrLParser:ture},{useFindAndModify:false})
.then(()=>{console.log('回调下,连接成功')})
.catch(err=>{console.log(err)})
//以上好像是有的报错,版本更替吧 这个具体没怎么研究

4.数据模型的建立:

//首先引入mongose
const mongoose = require('mongoosr')
//建立数据模型
const NameSchema = new mongose.Schema({
name:string,
add:string,
})
//导出数据模型方便相关api的引用

5.在新建接口:

const express = require('express')
const router = express.Router()
//引入模型
const NameSchema = require(./NameSchema)

//开始写接口
router.get('/api',async(req,res)=>{
//findbyid  create  findbyidandupdate findbyidanddelete 
 res.send(data)
})
//最后进行接口的导出
module.exports = router

6.增删改查接口的实例

//获取接口全部数据
router.get('/beginner', async (req,res)=>{

    const dat = await beginnerschema.find()
    res.send(dat)
})
//查询单个数据
router.get('/beginner/:id' , async (req,res)=>{
     const data = await beginnerschema.findById(req.params.id)
     res.send(data)
})

//增加数据并返回所有数据,后期的后应该是限制返回数据的亮,以后在想吧哈
router.post('/beginner', async (req,res)=>{

    const dat =  beginnerschema.create(req.body)
    const datA = await beginnerschema.find()
    res.send(datA)
})

//修改单个数据接口并返回当前的数据
router.put('/beginner/:id',async(req,res)=>{
    
    const data = await beginnerschema.findByIdAndUpdate(req.params.id,req.body)
    await data.save()
    const newdat= await beginnerschema.findById(req.params.id)
    res.send(newdat)
})
//删除单个数据接口
router.delete('/beginner/:id',async (req,res)=>{
    await beginnerschema.findByIdAndDelete(req.params.id)
    const data = await beginnerschema.find()
    res.send(data)
})

7.在main.js中引用

const NameSchema = require('./')
app.use('/',NameSchema)