整个项目已上传至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
});
});
}
125
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
