Node+微信小程序+服务端部署

博客小程序的开发与部署

项目gitee源码地址

前端

前言

前端很简单，就两个界面，一个是查看所有投稿的，一个是进行投稿的。

这里直接进行逻辑层说明和展示界面照片。

• 这是前端所有博客的照片

• 这是输入端的照片

---

文档目录

D:.
├─.vscode
├─components
│  └─user_bar
├─miniprogram_npm
│  └─lin-ui
├─node_modules
│  └─lin-ui
│      └─dist
├─pages
│  ├─index
│  ├─input
│  └─my
├─static
│  └─image
└─util

• components：自定义组件，只有一个user_bar
• pages：三个界面，分别为首页、输入、我的，但我的没用
• static：静态文件，只有一个初始头像
• util：自己定义的获取并格式化时间的中间件

具体代码

// app.js
App({
    onShow() {
        var that=this;
        var userdata = wx.getStorageSync('userdata');
        console.log(userdata);
        if (userdata == '') {
            wx.showModal({
                title: '提示',
                content: '您还未登录，请先登录',
                success(res) {
                    if (res.confirm) {
                        wx.getUserProfile({
                            desc: '用于小程序',
                            success(res) {
                                var userdata = {
                                    username: res.userInfo.nickName,
                                    avatar: res.userInfo.avatarUrl
                                };
                                wx.login({
                                    success: (result) => {
                                        wx.request({
                                            url: 'https://www..space/login',
                                            method: "GET",
                                            data: {
                                                code: result.code
                                            },
                                            success: (result) => {
                                                console.log(result)
                                                userdata.id=result.data.openid;
                                                wx.request({
                                                    url: 'https://www..space/login/postUserInfo',
                                                    data: userdata,
                                                    method: 'POST',
                                                    success: (res) => {
                                                        wx.setStorage({
                                                            key: "userdata",
                                                            data: userdata,
                                                            success() {
                                                                console.log("上传成功");
                                                            }
                                                        })
                                
                                                    }
                                                })
                                            }
                                        })
                                    }
                                })
                            
                            }
                        })
                    } else if (res.cancel) {
                        console.log('用户点击取消')
                    }
                }
            })


        }
    }
})

这个是app的文件，只有一个检验登录的功能，其中检验登录又有登录、记录用户数据等子功能

// index.js
Page({
    data: {
        cardData: [{
            author_avatar: "/static/image/avatar.png",
            author_name: "七月在夏天",
            author_id: "1",
            posttime: "18个小时前",
            container: "很简单，豆瓣现在这样就给大家指了一条明路:以后凡是这种国产的风口浪尖的的片子，会涉及到各方背后利益关系的片子...",
            likenumber: "160",
            commentnumber: "10"
        }],
        userdata: {}
    },
    onShow() {
        var that = this;
        wx.getStorage({
            key: 'userdata',
            success(res) {
                that.setData({
                    'userdata': res.data
                })
            }
        });
        wx.request({
            url: 'https://www..space/article/getArticle',
            method: 'GET',
            success(e) {
                if (e.statusCode == 200) {
                    that.setData({
                        'cardData': e.data
                    })
                }
            }
        })
    }
})

这个index.js文件的作用也只是获取所有卡片数据，即论坛中的论文。

// pages/input/i_index.js
var util=require("../../util/getTime.js")
Page({

    /**
     * 页面的初始数据
     */
    data: {
        formdata:{
            container:''
        },
        userdata:{}

    },
    onShow() {
        var that=this;
        wx.getStorage({
            key: 'userdata',
            success(res) {
                that.setData({
                    'userdata':res.data
                })
            }
        });
    },
    bindTextAreaBlur: function(e) {
        this.setData({
            'formdata.container':e.detail.value
        }) 

     },    
     formSubmit: function(e) {
        var formdata=this.data.formdata;
        if(formdata==''||formdata.container==''){
            wx.showToast({
              title: '请输入你想说的话',
              icon:"error"
            })
        }else{
            var time=util.formatTime(new Date())
            this.setData({
                'formdata.posttime':time
            })
        }
        var postdata={
            author_id:this.data.userdata.id,
            author_name:this.data.userdata.username,
            author_avatar:this.data.userdata.avatar,
            container:this.data.formdata.container,
            posttime:this.data.formdata.posttime
        }
        console.log(postdata);
        wx.request({
          url: 'https://www..space/article/postArticle',
          method:'POST',
          data:postdata,
          success(e){
              console.log(e);
          }
        })
     },
     formReset(){
         this.setData({
             'formdata':''
         })
     }
})

这个输入页面的功能是将用户写的博客上传。

    properties: {
        avatar:'',
        name:''
    },

这个自定义组件中的一个属性，可以实现组件间通讯的功能。

跟以下的代码对应即可。

<view class="container">
    <l-avatar src="{{avatar}}"/>
    <text style="color: white;">{{name}}</text>
</view>

/**
 * 
 * @param {获取时间} date 
 */
function formatTime(date) {
    var year = date.getFullYear()
    var month = date.getMonth() + 1
    var day = date.getDate()
  
    var hour = date.getHours()
    var minute = date.getMinutes()
    var second = date.getSeconds()
    var string=[year, month, day].map(formatNumber).join('/')
    string+=' '+[hour, minute].map(formatNumber).join(':')
    return string
  }
/**
 * 
 * @param {将时间格式化} n 
 */
  function formatNumber(n) {
    n = n.toString()
    return n[1] ? n : '0' + n
  }
  module.exports = {
    formatTime: formatTime,
  
  }

这里是自己定义的获取并格式化当前时间的代码，很好看。

---

前端就说到这里，下面来看后端。

后端

文档目录

D:.
├─bin
├─db_control
├─node_modules
├─public
│  ├─images
│  ├─javascripts
│  └─stylesheets
├─routes
└─views

其中：

• db_control：数据库处理文件
• routes：路由处理文件
• views：视图文件，没用

具体代码

入口文件

var createError = require('http-errors');
var express = require('express');
var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');

var indexRouter = require('./routes/index');
var usersRouter = require('./routes/users');
var loginRouter = require('./routes/login');
var articleRouter= require('./routes/article');

var app = express();

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');

app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));

app.use('/', indexRouter);
app.use('/users', usersRouter);
app.use('/login',loginRouter);
app.use('/article',articleRouter);

// catch 404 and forward to error handler
app.use(function(req, res, next) {
  next(createError(404));
});

// error handler
app.use(function(err, req, res, next) {
  // set locals, only providing error in development
  res.locals.message = err.message;
  res.locals.error = req.app.get('env') === 'development' ? err : {};

  // render the error page
  res.status(err.status || 500);
  res.render('error');
});

module.exports = app;

上边已经叙述过各个的作用了，不在赘述

路由文件

登录

var express = require('express');
var bodyParser = require('body-parser')
var request = require('request');
var router = express.Router();

var userData_control=require('../db_control/userData_control')
var app_id = ""
var app_secret = ""
var base_url = 'https://api.weixin.qq.com/sns/jscode2session'
var unionid;	
	
/* GET users listing. */
router.get('/', function(req, res, next) {
	var code = req.query.code

	var url = base_url + '?appid=' + app_id + '&secret=' + app_secret + '&js_code=' + code +"&grant_type=authorization_code"
	request(url, (error, response, body) => {
		var thebody=JSON.parse(body)
		console.log(thebody);
		unionid=thebody.openid
		res.end(body)
	})
 
}); 

router.post('/postUserInfo', function(req, res, next){
	console.log(req.body);
	var userdata={
		union_id:req.body.id,
		name:req.body.username,
		avatar:req.body.avatar
	}
	console.log(userdata);
	userData_control.add_data(userdata);
	res.send(unionid)
}) 

module.exports = router; 

这个作用也很明显了我说。

文章路由

var express = require('express');
var bodyParser = require('body-parser')
var request = require('request');
var router = express.Router();
var article = require('../db_control/articleData_control')

const link = require('../db_control/link')
const conn = link.conn

router.get('/', function(req, res, next) {
	res.render('index', {
		title: 'Express'
	});
});



router.post('/postArticle', function(req, res, next) {
	article.add_data(req.body)
})

router.get('/getArticle', (req, res, next) => {
	var addSql = 'SELECT * FROM articledata';
	conn.query(addSql, (err, result) => {
		if (err) {
			reject(err)
		} else {
			e=JSON.parse(JSON.stringify(result))
			res.send(e)
		}
	})
})

module.exports = router;

数据库控制文件

数据库连接

const mysql = require('mysql')
//创建连接
const conn = mysql.createConnection({
	host: '',
	port: ,
	user: '',
	password: '',
	database: ''
})
//连接mysql
conn.connect((err) => {
	if (err) {
		console.log(err)
		return;
	}
	console.log('数据库链接成功！')
})


module.exports={
	conn
}

文章处理

const link = require('./link')
const conn = link.conn

function add_data(data) {
	var addSql = 'INSERT INTO articledata(author_id,author_name,author_avatar,container,posttime) VALUES(?,?,?,?,?)';
	var addSqlParams = [data.author_id, data.author_name, data.author_avatar, data.container, data.posttime];
	conn.query(addSql, addSqlParams, (err, res) => {
		if (err) {
			console.log(err.message);
			return;
		}
		console.log('INSERT OK!' + res);
	})

}




module.exports = {
	add_data
}

用户数据处理

const link = require('./link')
const conn = link.conn

function add_data(userData) {

	var addSql = 'INSERT INTO userdata(union_id,name,avatar) VALUES(?,?,?)';
	var addSqlParams = [userData.union_id, userData.name, userData.avatar];
	conn.query(addSql, addSqlParams, (err, res) => {
		if (err) {
			console.log(err.message);
			return;
		}
		console.log('INSERT OK!' + res);
	})

}

module.exports = {
	add_data
}
 

包依赖文件

{
  "name": "back-end",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "start": "node ./bin/www",
    "devstart": "nodemon ./bin/www"
  },
  "dependencies": {
    "body-parse": "^0.1.0",
    "cookie-parser": "~1.4.4",
    "debug": "~2.6.9",
    "express": "~4.16.1",
    "http-errors": "~1.6.3",
    "jade": "~1.11.0",
    "morgan": "~1.9.1",
    "mysql": "^2.18.1",
    "request": "^2.88.2"
  },
  "devDependencies": {
    "nodemon": "^2.0.16"
  }
}

总结

各部分功能其实之前都已经说过了，主要记录一下自己怎么写的，留下一个参考。

服务端配置

服务端配置还是很麻烦的，但是自己摸索出来的一条道路，感觉就还好了。

1. 有一个服务器和域名
2. 服务器上有宝塔面板
3. 宝塔面板下载了Nodejs、MySQL等需要的软件
4. Nodejs中安装了相应的模块、MySQL导入了本地数据
5. 网站下载了SSL证书、有了https开头的协议，具体教程
6. 利用WinSCP从本地把源码导入到Linux服务器中
7. 利用宝塔的node工具运行代码，并指定运行端口等

具体就这么多，然后就可以打开你的网站进行查看了。