NodeJS-sails+mongodb+axios+bootstrap+vue3

整个项目已上传至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
        });
      });
}