本文会使用vue搭建一个简单单页应用,并且使用webpack打包,使用express框架服务,并使用mongodb管理数据存储,在服务器端部署,可以实现ip访问
项目效果预览
环境前提
Node.js (>=4.x, 6.x preferred), npm version 3+ and Git.
不论是本地开发还是服务器部署,都需要node环境,次处就不细讲如何在windows和linux配置nodejs环境了
1.vue-cli快速搭建项目
安装
1 | npm install -g vue-cli |
创建集成了webpack的项目
1 | vue init webpack my-project |
接下来会进入安装阶段
1 | Project name (my-project) |
- build目录 npm build *运行时执行的文件存放在此处,还有很重要的webpack配置文件
- config目录 确定了执行run dev 和run build时的一些配置文件
- dist目录 存放的是build命令执行后生成的产品文件
- node_modules目录 存放的是依赖
- src目录 存放的就是源码
在cmd里面切换到项目目录
1 | cd my-project |
安装依赖,此时才会生成node_modules目录
1 | npm install |
这个命令会自动读取package.json里面含有的所有的依赖信息和版本
等待安装完毕,就可以尝试启动项目了
1 | npm run dev |
这个时候,会自动拉起浏览器,自主访问http:\\\localhost:8080
此时,在这个页面会出现一个vue的默认界面
此处建议使用chrome浏览器,安装一个vue-tool插件,会比较方便的进行vue开发
接下来就可以进入到我们的项目开发阶段
2.完成本地环境下项目开发
由于涉及到xhr请求,所以还需要下载vue-resource,样式方面选择了bootstrap框架,所以先安装依赖
1 | npm i vue-resource bootstrap --save |
然后我们需要在main.js中引入我们的依赖
1 | // The Vue build version to load with the `import` command |
2.1统一部分编写
我们可以看到src源码目录的结构如下
我们可以把app.vue当做是主组件,其他组件的入口,所以在app.vue编写的部分,在每个路由下的页面都会存在
,我们可以在此处,为我们的项目编写一个导航栏和页脚
此时的app.vue
1 | <template> |
由于用到了bootstrap的自适应合并、轮播图组件,所以,如果此时你run dev,会报一个缺少jQuery的错误,所以,我们可以去网上找一个jquery的cdn库,找到根目录的index.html,这是我们的首页入口页面,加入如下内容
1 | <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script> |
由于bootstrap是一个可以自适应手机端的ui库,所以你也可以顺手加入
1 | <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> |
于是在手机上访问的时候,也会 有较好的效果
此时的index.html
1 | <!DOCTYPE html> |
然后
1 | npm run dev |
此时的效果
2.2创建首页组件
看到上图的中间部分,这就是<router-view></router-view>
渲染的效果,此时的首页默认是components下的vue组件,于是我可以写一个自己的首页组件,取代中间的部分
1 | <template> |
这是一个轮播图,但是我们需要怎样才可以看到效果呢,怎样取代中间部分,这就涉及到了路由的问题了,vue-router可以登场了
在刚才的src目录下,还有一个router目录,查看里面的index.js文件,此时是这样的
1 | import Vue from 'vue' |
于是我们明白为什么,首页会显示helloworld效果,是因为路由指定读取了在路径为’’/‘’的时候读取该组件,于是我们将该部分换成我们自己的组件
此时的index.js
1 | import Vue from 'vue' |
修改后,我们可以查看效果
现在的效果就比较优雅了,但是右边好像比较空虚,于是我们可以设置一个侧边栏,考虑到,不仅仅在首页要用到侧边栏,于是我们将侧边栏写成一个组件,方便多个页面调用该组件
2.3创建通用部分组件
Sidebar.vue
1 | <template> |
那我们该怎样在父组件Home.vue里面加入组件
template部分
1 | <template> |
script部分
1 | <script> |
此时由于热加载,直接就可以看到加入了侧边栏后的效果
于是一个完全没有数据交互的展示型首页就出现了,接下来我们要创建一些有其他功能的界面
2.4创建录入书籍页面
录入页面可以算是控制台了,为了管理方便,肯定是会有一个控制台页面进行集成,但此处我们只讲实现这一个功能的页面
创建BookAdmin.vue
1 |
|
为了能够反问到我们的页面,我们都知道该去添加新的路由了
index.js修改成如下
1 | import BookAdmin from '@/components/BookAdmin' |
然后在浏览器访问http://localhost:8080/#/bookAdmin
此时的效果如下
那我们该怎样向后台post表单数据呢
大家可以看组件的script部分
1 | <script> |
首先使用了一个data()方法,返回的book对象,里面包含了我们需要接收关于一个book 的所有属性,此时为空,然后我再下面又引入了一个methods对象,里面包含了点击按钮触发的save()方法
1 | this.$http.post('localhost:8080/createBook',{}).then(function(){}) |
便是vue-resource的使用方法,此处的url-‘localhost:8080/createBook’,便是发送的请求链接,于是大家便知道,我们接下来要定义后台的监听端口,并定义/createBook方法,才能使这个方法生效
2.5完成数据交互
首先安装需要的依赖
1 | npm install express morgan mongodb body-parser --save-dev |
Morgan和body-parser,分别用来log美化和解析参数。然后再根目录创建app.js作为入口
1 | var express = require('express'); |
通过上面的配置,我们创建了名为vuetest的数据库,确定了监听端口8080
接下来继续在app.js编写/createBook方法
1 | //增加书籍 |
接下来需要开启我们的mongodb服务,本地开发,就得在本机的windows或者mac上安装mongodb
完成了mongodb安装之后
切换到mongodb目录
1 | $ ./mongod --dbpath E:\data |
使用这个命令启动mongodb服务 dbpath是为了确定数据存储的路径,我的本地数据库存储路径就是E:\data
有上图的显示表示开启成功
接下来,打包构建并运行我们的项目
1 | npm run build |
可以在localhost:8080访问我们的项目,直接http://localhost:8080/#/bookAdmin到达录入页
输入一些信息进行测试
在XHR请求里面可以看到一切正常,数据已经插入到数据库,并且此时已经跳转到了/books列表页了,由于没有写列表页,所以中间部分是空白的
2.6创建数据展示组建-列表页
BookList.vue
1 | <template> |
套路和之前一模一样
再到router的index.js插入路径
1 | ... |
然后回到app.js添加控制方法
1 | //获取书籍列表 |
然后我又去http://localhost:8080/#/bookAdmin录入了一本书,此时跳转之后的效果
感觉还是不错的
于是到此处,关于本地环境下的项目,已经跑通全栈,接下来,便是服务器跑通的环节
3.完成服务器环境下的项目开发
3.1首先是先将项目上传到服务器
在此处我选择使用git,然后考虑我们应该上传哪些到服务器,dist生成文件肯定是要的,然后是app.js涉及到的部分,不需要的在.gitgignore里面便可以再上传时被忽视
现在github上创建一个git仓库https://github.com/decadeheart/vue-example.git
在本地
1 | git init |
这个时候可以切换到服务器了
至于服务的来源,推荐腾讯云,学生优惠之前可以抢1元一个月的,现在我买的是10元一个月,最低配置,但也可以拿来耍耍
1 | ssh root@xxx.xx.xx.xx |
登录上去之后,首先将项目文件拉取下来
1 | cd /home |
接下来就是想要运行node app.js来运行项目了
但是肯定是需要依赖的,首先便就是服务器上的nodejs,还有服务器上的mongodb
3.2安装服务器上的依赖
顺序应该是
- 安装nodejs,可以参考Linux系统(Centos)下安装nodejs并配置环境
- 安装mongodbMongoDB系列一:CentOS7.2下安装mongoDB3.2.8
- 安装nginx Centos下 Nginx安装与配置
在我们启动了mongodb之后。可以考虑来安装运行app.js的依赖
1 | npm i express body-parser morgan mongodb |
访问http://ip:8080/#/就可以在网页看到网上的效果
但是这个时候,我们所有的交互数据都出现了问题,报下面这个错误
这是因为我们发送的请求loacalhost并不是我们现在的服务器ip,所以连接的不是服务器数据库,被拒绝,需要修改成
1 | http://119.29.208.124:8080/createBook |
然后重新打包,打包之后上传git再拉下来更新,就发现我们可以正常录入信息到数据库了,作为在服务器上运行的项目,肯定是希望他在服务器上永久运行,所以可以安装pm2或者forever等工具使得项目永久在服务器上运行
由于我的服务器原因,下载pm2老是失败,所以我选择了forever
1 | npm i forever g |
常用命令如下
1 | $ npm install forever -g #安装 |
然后你就可以推出当前目录去做其他事情了
讲道理,这个项目现在已经可以在服务器自主运行,终于完结撒花了
最后附上github地址