整个项目已上传至https://github.com/Yilia7/community
欢迎交流。
项目复盘
一个疫情期间可使用的智慧社区管理系统。
nginx
nginx HTTP服务器
frontEnd前端文件夹中放nginx下载解压的东西
config中改
1.端口号serve-listen 不常用的 本项目中用9090
2.location-root改成www
解压后 新建一个文件夹www 放已经做好的bootstrap+vue文件夹
运行
nginx路径下 nginx回车 用于开启nginx 才能用9090打开我的网页
前端修改-中文
选1情况下(sails选择)
本项目是已经有了前端
如果需要sails本身自带的前端的话
config文件夹中 i18n.js
locales:中多加一个'zh'
后面的defaultLocale取消注释 改成zh
在locales文件夹中新加一个文件zh.json
在需要的页面 例如主页面 views-pages-homepage.ejs中
例如
'A new brand app.'改成
<%-__('A brand new app.') %>
格式<%-__('') %) 有两个下划线
zh.json会自动生成
把后面内容改成需要的中文
"A brand new app.": "欢迎你"
完成 运行sails文件 1337 查看
运行前端
但本项目不需要它的前端-一般会用bootstrap做好前端
运行之后 去自己修改的端口9090后跟放在www中的前端文件名
Vue
Vue写法
很多情况下例如 <a href=" "></a>
在href前面加上: <a :href="'inner-page.html?newsTitle='+item.newsTitle"></a>
就为Vue形式 在双引号" "中单引号' '引起来的内容是字符串 没引起的是Vue变量
Vue显示问题-v-cloak
当网络较慢,网页还在加载 Vue.js ,而导致 Vue 来不及渲染,这时页面就会显示出 Vue 源代码。
v-cloak
例如
html前端文件中
<div id="innerPage" v-cloak>
CSS中
[v-cloak]{
display: none;
}
Vue数据绑定MVVM
Vue 上面例如 v-model="loginName"
下面data(){loginName="";}才算是绑定上了
在bootstrap的基础上 将动态要传到后端或从后端传来的数据修改成Vue即可
Vue版本问题
Vue查看版本低的例子时
在我的电脑-属性-高级系统配置-环境变量-用户变量中新建
变量名:NODE_OPTIONS
变量值:--openssl-legacy-provider
解决
sails-mongo连接
config-datastores.js增加和数据库mongo的连接
adapter: 'sails-mongo',
url: 'mongodb://127.0.0.1:27017/community',
npm install sails-mongo --save安装sails和mongo配置器
sails
安装npm install -g sails
启动项目 在具体文件的cmd下/cd 文件名
新建项目
cmd-sails new 文件名
选2-前后端分离-前后端的通信/权限等自己配置 1:前后端混合-大部分功能例如注册/登录已经写好
1前后端的通信完不成
配置
配置解决跨域问题-以至于能够前后端通信
要修改的地方:
1.
config-locales-security.js最后
crsf 跨域false 跨站请求伪造
变成注解
2.
cors:{}中内容解除注解-改成true
cors: {
allRoutes: true,
allowOrigins: '*',
allowCredentials: false,
},
3.
config-locales-policies.js的最后
module.exports.policies={}中内容全部注解-已注解
4.
config-locales-bludeprints.js
解开 更改
rest: false,
shortcuts: false,
启动项目
sails lift
进入sails文件的路径 sails lift 启动
nodemon(方便*)
npm start启动
nodemon安装 npm install nodemon
npm start使用nodemon启动sails 不需要每次都重启 可以在cmd中自动更新
然后在package.json-"scripts"-"start"更改
Axios
Vue与sails连接
Restful+Axios接口
Axios 是一个基于 promise 的 HTTP 库
安装模块
// npm下载axios到项目中npm install axios --save
也可以不用-本项目中没用到qs:
// npm下载qs到项目中npm install qs.js --save
qs的作用是用来将请求参数序列化,比如对象转字符串,字符串转对象。
Axios例子
axios({ method: 'get', url: "http://localhost:1337/api/v1/entrance/login", }) .then((response) => { console.log(response); //处理数据 //传回来的数据进行处理 例如 console.log(response.data[0].username); })
sails generate controller entrance/login 加控制器
用于在文件里api-controllers-entrance新建login.js文件
如果有这个文件说明选择了1-前后端混合-已经完成了这个功能
选择2-前后端分离-则需要自己写
添加控制器 配置路由
增加模型sails generate model user
里面添加username password
路由配置在config-locales-routes.js中
config-locales-routes.js
在 };前加
下面加上例如
'GET /api/v1/entrance/login':{ 路由 controller:'entrance/LoginController', 控制器 action: 'login', 控制器中的login方法 skipAssets:true },
后端
查看传到后端的数据
req.query.username
查询例子
User.find({username:req.query.username,password:req.query.password}) .exec(function(err,data){ if(err) return next(err); console.log(data); res.send(data);//send回前端response中取出 });
查询出的内容在前端axios响应回来做
NetWork错误
网页上network错误 没有返回的响应值response 错误如下:
{ "message": "Network Error", "name": "AxiosError", "config": { "transitional": { "silentJSONParsing": true, "forcedJSONParsing": true, "clarifyTimeoutError": false }, "transformRequest": [ null ], "transformResponse": [ null ], "timeout": 0, "xsrfCookieName": "XSRF-TOKEN", "xsrfHeaderName": "X-XSRF-TOKEN", "maxContentLength": -1, "maxBodyLength": -1, "env": { "FormData": null }, "headers": { "Accept": "application/json, text/plain, */*" }, "baseURL": "http://localhost:1337", "method": "get", "url": "http://localhost:1337/api/v1/entrance/login", "params": { "username": "admin", "password": "111" } }, "code": "ERR_NETWORK", "status": null }
解决办法
config-security.js中虽然解开了注解 还要把 allRoutes改成true
cors: {
allRoutes: true,
allowOrigins: '*',
allowCredentials: false,
},
上传文件/图片
通过@change="getNewsPicture"实现 getNewsPicture(e){ newsPicture+=e.target.files[0].name;//图片名称 console.log(e.target.files[0].name); },
自动加载
网页打开自动加载数据库中内容
打开网页数据库中所有数据显示在网页上
mounted(){}
和data() methods()同级
刷新
location.reload()
实时通信
WebSocket
WebSocket使得客户端和服务器之间的数据交换变得更加简单,允许服务端主动向客户端推送数据。在WebSocket API中,浏览器和服务器只需要完成一次握手,两者之间就直接可以创建持久性的连接,并进行双向数据传输。
完成连接后可以一直通信 而不是传过去断开 另一方才能收到
Ajax长连接
我想通过ajax与服务器建立一个长连接,服务器会不断的传输数据给前台,由于日志不断的更新,我想把新的数据不断的传给前台。
获取时间
显示的是提交时的时间 因此数据库也要保存时间
methods中 定义方法
通过@change="getNewsPicture"实现 getNewsPicture(e){
getDateTime() { let date = new Date(); let year = date.getFullYear(); // 年 let month = date.getMonth() + 1; // 月 let day = date.getDate(); // 日 let hour = date.getHours(); // 时 hour = hour < 10 ? "0" + hour : hour; // 如果只有一位,则前面补零 let minute = date.getMinutes(); // 分 minute = minute < 10 ? "0" + minute : minute; // 如果只有一位,则前面补零 let second = date.getSeconds(); // 秒 second = second < 10 ? "0" + second : second; // 如果只有一位,则前面补零 return `${year}-${month}-${day} ${hour}:${minute}:${second}`; },
在提交按钮@click中
var currentTime=this.getDateTime();
axios传数据params时
date:currentTime,
数据库处理
sails 框架下 Waterline ORM 常用查询方法 一介布衣 (yijiebuyi.com)
关键字查询
News.find({newsTitle:{ 'contains':req.query.newsTitle } })
按照生成顺序倒序
显示最新内容----顺序(不需要写)ASC
.sort([{ createdAt: 'DESC' }]) 必须加中括号(离谱)
文件上传
例子
前端html5
<input type="file" name="healthyFile" @change="getHealthyCode($event)">
script-axios
getHealthyCode(e){ var forms=new FormData(); var configs={ headers:{'Content-Type':'multipart/form-data'+new Date().getTime()} }; forms.append('healthyFile',e.target.files[0]); console.log(e.target.files[0]); axios .post(global.host+":1337/api/v1/fileUpload",forms,configs) .then((response) => { console.log(response); }) .catch((error)=> { console.log(error); });
后端nodejs
fileUpload:async function(req,res){ req.file('healthyFile').upload({ dirname: require('path').resolve(sails.config.appPath, '../frontEnd/nginx-1.23.0/www/Community/assets/img') },function (err, files) { if (err) return res.serverError(err); return res.json({ message: files.length + ' file(s) uploaded successfully!', files: files }); }); } 返回得到新生成的文件名-放到数据库中-取出用 req.file('healthyFile').upload({ dirname: require('path').resolve(sails.config.appPath, '../frontEnd/nginx-1.23.0/www/Community/assets/img') },function (err, files) { if (err) return res.serverError(err); return res.json({ message: files.length + ' file(s) uploaded successfully!', files: files }); }); }