当前位置: 首页 > 后端技术 > Node.js

vue+express+mongoose项目搭建

时间:2023-04-03 23:54:38 Node.js

注(2018-2-12):仅用于记录,不舍得删除。推荐使用koa2。koa2相关的资料很多~1。搭建运行环境(基于macOSSierra10.12.4)并全局安装node(v6.9.4)安装过程稍微配置一下cnpm(npm的淘宝镜像)sudonpminstall-gcnpm--registry=https://registry.npm.taobao.org`全局安装vue官方脚手架工具vue-cli(vue官网文档)cnpminstall--globalvue-cli2。基于webpack模板创建项目创建vueinitwebpacktifi-music按需创建配置,我选择no运行打包测试除了安装routercdtifi-misic//安装依赖包cnpmi//运行npmrundev//打包npm运行build3。配置express在项目根目录创建一个server.js文件,内容如下//用于获取路径constpath=require('path')//用于读写文件Streamconstfs=require('fs')constexpress=require('express')//不需要安装cnpm,因为它是express中间件bodyParser//用于解析客户端请求的body中的内容,内部使用JSON编码处理,url编码处理和文件上传处理。//bodyParse可以接受客户端ajax提交的json数据,以及url处理,不使用这个中间件会导致无法接收客户端json数据constbodyParser=require('body-parser')//需要由cnpm安装,cookieParser中间件用于获取浏览器发送的cookie中的内容。//使用cookieParser中间件后,表示客户端请求的htto.IncomingMessage对象有一个cookie属性//这个属性是一个对象数组,存储所有浏览器发送的cookies,每个cookie是cookies属性值数组中的一个对象。constcookieParser=require('cookie-parser')//serve-favicon中间件请求网站使用的图标如下//express().use(favicon(__dirname+'/public/images/favicon.ico'))constfavicon=require('serve-favicon')//morganmiddle该软件为日志中间件,用于节点的日志输出//高级用法见http://www.cnblogs.com/chyingp/p/node-learning-guide-express-morgan.htmlconstlogger=require('morgan')//获取后端路由。我把服务器文件设置在根目录下,读了下面的index.jsconstroutes=require('./server/router')//管理配置的Plugins。统一管理后端Service端口和数据库连接地址等,默认配置在config目录下的default.js中constconfig=require('config-lite')//使用压缩中间件进行压缩处理staticcontent//Example:app.use(express.static(path.join(__dirname,'public')))constcompression=require('compression')//实例化连接中间件的express对象constapp=express()app.use(logger('dev'));app.use(bodyParser.json());app.use(bodyParser.urlencoded({extended:false}));app.use(cookieParser());app.use(compression({threshold:0}))app.use('/api',routes)app.use(express.static(path.resolve(__dirname,'./dist')))//因为是一个单页应用,所有请求到/dist/index.htmlapp.get('*',function(req,res){consthtml=fs.readFileSync(path.resolve(__dirname,'./dist/index.html'),'utf-8')res.send(html)})app.listen(config.port,function(){console.log(`Serverrunninginport${config.port}`)})解决开发模式下npmrundev时跨域的问题打开根目录下config目录下的index文件,配置proxyTable如下:proxyTable:{'/api':{//这里的target是填写服务器的端口地址target:'http://localhost:3000/api/',changeOrigin:true,pathRewrite:{'/api':''}}}createrouterserver.jsconstroutes=require('./server/router')写在文件里。这里require的路径就是我们创建路由器所需要的路径。在根目录下创建server文件夹,并在其目录下创建router.js文件。内容如下://Express路由中间件,import等待从控制器添加路由constrouter=require('express').Router()//引入节点的文件路径模块path和文件处理模块fsconstpath=require('path')constfs=require('fs')//读取控制器文件下的所有控制器。为了实现controller的动态读取,我们研究一个更好的写法constcontrollers=fs.readdirSync(path.resolve(__dirname,'./controller'))//遍历获取到的文件,动态加入expressroutinginformation:url,type,response,即请求路径,请求方法,响应处理函数controllers.forEach((file)=>{//获取具体到controllerletcontroller=require('./controller/'+file)//遍历controller携带的信息for(letoincontroller){//获取请求路径,如果没有则取默认路径为'/'+filename(不包括后缀)leturl=controller[o].url?controller[o].url:('/'+o)//获取请求方法,如果没有,默认方法是'get'lettype=controller[o].type?controller[o].type:'get'//响应处理函数,如果没有获取,则使用默认处理letresponse=controller[o].response?controller[o].response:(req,res)=>{res.json({success:false,info:'无效路由未处理response'})}//设置路由信息router[type](url,response)}})//使用动态设置路由router.use(router)//输出路由module.exports=router创建controllerrouter.js文件写入获取同级目录controller下的所有文件,所以我们只需要创建一个usercontroller在server文件夹下的controllerserver创建user.js文件,内容如下:constuserName=[{name:'测试用户名0'},{name:'测试用户名1'}]//'输出要添加的路由信息??对象//每个对象中可以设置三个属性:url、type、response(不设置则默认处理)module.exports={users:{response:(req,res)=>{res.json(userName)}},reg:{type:'post',response:(req,res)=>{res.json('reg')}}}运行express前面的文件创建完成后,运行express首先安装依赖包cnpmicookie-parsermorganserve-faviconmorganconfig-lite–save-dev另外,修改文件时,需要频繁重启服务器。全局安装nodemon可以自动重启cnpminstall-gnodemon然后配置package.json中的脚本添加启动命令"scripts":{"dev":"nodebuild/dev-server.js","build":"nodebuild/build.js","start":"nodemonserver.js"}执行npmrunbuild将项目打包用于生产环境最后在命令行输入nodestart运行,command行输出Serverrunninginport3000表示express启动成功。当浏览器访问http://localhost:3000/api/users,看到输出测试数据,express配置成功。配置mongoose安装mongodb并启动(过程略)mongoosecnpminstallmongoose--save-devconnectmongodbwriteentry:在server文件下新建文件夹db,并在其下新建文件db.js,内容如下://引入节点处理模块的文件路径模块路径和文件fsconstpath=require('path')constfs=require('fs')constmongoose=require('mongoose')//mongodb连接?mongoose.connect('mongodb://localhost/tifi-music')//在这里阻止node.js-Mongoose:mpromiseerrormongoose.Promise=global.Promise;letdb=mongoose.connection;db.on('error',console.error.bind(console,'Connecterror'))db.once('open',function(){console.log('Mongodb启动成功')})//声明要添加的模型对象letmodel={}//读取方式同routerconstschemas=fs.readdirSync(path.resolve(__dirname,'./model'))schemas.forEach((file)=>{//设置数据库表名为读取文件name(去掉后缀)letname=file.substring(0,file.lastIndexOf("."))//获取的对象为数据库字段letschema=require('./model/'+file)//使用mongoose.schema和mongoose.model完成数据库表和字段的创建model[name]=mongoose.model(name,mongoose.Schema(schema))})//输出模型对象module.exports=modelwritemodel:alsoindb文件在名为model的文件夹下新建一个文件夹,并在其下新建一个user.js,内容如下:module.exports={//设计数据库字段,先简单设置一些常用的字段name:String,phone:String,email:String,password:String,createTime:Date}修改controller:修改controller文件下单user.jsas://'引入mongoose的模型constmodel=require('../db/db')//加密用户密码constsha1=require('sha1')//mogodb会自动帮我们加上_id字段,类型是objectid,我们需要转换成用户创建时间constobjectIdToTimestamp=require('objectid-to-timestamp')module.exports={//获取所有用户users:{response:(req,res)=>{model.User.find({},(err,doc)=>{if(err)console.log(err)res.send(doc)})}},//用户注册reg:{type:'post',response:(req,res)=>{console.log(req.body);letuserRegister=newmodel.User({email:req.body.email,password:sha1(req.body.password),})//将objectid转换为用户创建时间,使用UTC国际标准时间userRegister.createTime=objectIdToTimestamp(userRegister._id)//查询数据库中是否已经存在邮箱model.User.findOne({email:(userRegister.email).toLowerCase()},(err,doc)=>{if(err)console.log(err)if(doc){res.json({success:false,info:'此邮箱已被注册'})}else{userRegister.save(err=>{if(err)console.log(err)console.log(newDate(),'注册成功')res.json({success:true,data:{email:userRegister.email}})})}})}}}运行mongoose并测试查询和插入以确认与mongod的连接成功。如果之前配置了nodemon,控制台会有一个Mongodb启动成功测试插入数据,打开postman进行post请求,成功后如下图:![图片说明][3]-测试查询数据,打开[postman][2]发起get请求,成功后如下图:![图片说明][5]-如果以上都成功,说明mongoose已成功连接,所有基础设施已完成,可以进行下一步的开发!

猜你喜欢