vue+nodejs+mongodb后台部署

  1. 准备工作:买好阿里云服务器。
  2. 前端代码使用npm run build生成dist
  3. 在服务器中安装好mongodb和nginx (使用yum还是wget,各位自己斟酌,有一个工具叫宝塔面板可以可视化安装工具)
  4. 使用xftp或者winscp将代码复制到服务器中,将后端代码在服务器跑起来。(node版本过低可能会导致错误,如果你使用es6语法最好使用node版本8以上的),可以选择pm2管理项目。
  5. 在nginx.conf配置一下,将dist使用xftp传到服务器。
  6. 这里需要注意的是,将服务器防火墙打开,配置安全组规则时,将node监听的端口号打开。

流程就是这样,具体步骤请自行解决了。

【资源介绍】 该项目是个人毕设项目,答辩评审分达到95分,代码都经过调试测试,确保可以运行!欢迎下载使用,可用于小白学习、进阶。 该资源主要针对计算机、通信、自动化等相关专业的学生、老师或从业者下载使用,亦可作为期末课程设计、课程大作业、毕业设计等。 项目整体具有较高的学习借鉴价值!基础能力强的可以在此基础上修改调整,以实现不同的功能。 一 mongodb使用 1)命令函: (mongo:代表进入mongo环境) (show dbs :显示数据库) (db当前) (use goods :切换到goods) 2)Token令牌 : 就是一个加密的字符串 加密算法在。 权限管理 当第一次登陆以后生成一个令牌 (这个令牌是加密的) 设置有效期 用户第一次使用用户名登陆成功后,后端生成病返回给前端保存 令牌是有有限期的 亦可以伪造 所以要校验 nodejs 有加密和解-解密 步骤一:项目准备工作 1 vue create myprojct 创建项目 (myprojct 项目名字) 2 淘宝镜像源npm install -g cnpm(使用下载更快) 1)myproject安装 项目所需的各种依赖 1 npm install vue-resource --save -dev 2 npm install axios --save 3 npm install element-ui -S 4 npm install vuex --save 5 npm install animate.css --save 6 npm install -g babel 7 npm i core-js 2)mongodb安装 上传头像 mongo 先下载Npm i mullter 1mongodb文件夹:在mongodb index文件的作用引用 注意点当每次编写接口都需要在index.js 引入路由文件 以及router.use(文件路径,文件名) 3)引入公共css在public (reset文件夹名字)第二要使用在public里面的index.html 引入css <link rel="stylesheet" href="css/reset.css"> <link href="//cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"> 这一个是引入boootcss这个css 4)router.js 路由 1 定义(路由)组件 2 定义路由 3 创建 router 实例, 4 然后传 `routes` 配置 创建和挂载根实例。导出路由然后在min.js引入 在这个项目里面使用了嵌套路由注意和 LeftMenu.vue 关系 children 里面是路由嵌套 leftmenu后面细说 5)配置min.js store在后台管理系统里面是没有使用的 ``` 6)图片assets 7)在views创建 Register.vue Login.vue 404.vue项目 index.vue 1 注册页面 接口是user.js 登录页面 有有联系页面是myproject 的 http.js 和login.vue Authorization就是token当code===1时候 let targetUrl = this.$route.query.targetUrl || './Index' 代码解释:声明一个目标路由如果有目标地址就跳转到目标地址 没有就跳转到首页面Index.vue 保存token 2创建htttp.js 引入 loading和引入axios 使用loading和请求拦截和相应拦截环节和使用loading 当 请求数据code==1 就跳转到index.vue token校验 跳转到index.vue 后components里面再创建leftMenu.vue 和HeadNav.vue 具体看leftMenu以里面的嵌套路由 这两个文件夹引入到views的 Index.vue里面 使用import .. from ..引入切注册组件 HeadNav.vue :取出token校验 解码(没写此步骤)当点击退出删除token leftMenu.vue 里面有嵌套路由 足以逻辑的使用 children增加子路由步骤 1在 leftMenu.vue 下面cheildren 的 ·{ path: "FoundEdit", name: "编辑商品" }, 2找到router.js
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值