功能的简述:
此web页面的开发依赖于微信小程序的http api接口,通过小程序http api的相关接口(auth.getAccessToken、uploadFile、databaseAdd),将本地图片通过web上传到云存储中
本地web页面使用了koa2的koa-generator,能够快速的搭建本地web环境(里面用到的几个模块:axios.min.js、request、request-promise、fs)
Node基础安装配置参考:https://www.cnblogs.com/liaojie970/p/9296177.html
启动web:命令提示符定位到项目文件夹下,执行:npm start
启动后通过localhost:3000来访问
1、安装Node.js
2、改变原有的环境变量(假设:node的安装路径D:\Program Files\nodejs)
npm config set prefix "D:\Program Files\nodejs\node_global" npm config set cache "D:\Program Files\nodejs\node_cache"
执行完成后就可以看到红框里面的文件夹了。ps:cache是使用了npm install下载了包之后才会创建
3、在系统环境变量添加系统变量NODE_PATH,输入路径D:\Program Files\nodejs\node_global\node_modules,此后所有安装的模块通过npm install xxxx -g都会安装到改路径下(-g表示安装在global目录下)
4、在命令行输入以下命令试着安装express
npm install express -g
完成后再对应目录能看到express文件夹
5、在命令行输入node进入编辑模式,输入以下代码测试是否能正常加载模块:
require('./express')
如果这里出错,则要检查环境变量的配置看是否正确
6、安装淘宝npm(cnpm)
a、输入:
npm install -g cnpm --registry=https://registry.npm.taobao.org
b、环境变量--添加用户变量
c、打开cmd命令提示符 输入 cnpm -v 如果系统没有报错则说明配置OK了
7、安装 koa-generator
cnpm install koa-generator -g
8、创建网站目录(命令提示符进入到你想创建的目录下,默认是在c:盘的)
koa2 practice-cms -e
9、进入刚才创建的目录下执行以下命令,安装初始模块
cnpm i
10、执行npm start,启动网站
npm start
成功后会在cmd命令提示符下显示
11、在浏览器输入localhost:3000 浏览网站
12、下载vscode,打开刚才创建的practice-cms文件夹
public文件夹是放一些静态资源的 里面的javascripts文件夹需要下载个axios.min.js文件,此文件可以发起ajax
routes文件夹主要是路由
views是前台页面展示
13、找到views目录下index.js,编辑内容为:
<!DOCTYPE html>
<html>
<head>
<title><%= title %></title>
<link rel='stylesheet' href='/stylesheets/style.css' />
<script src="/javascripts/axios.min.js"></script>
</head>
<body>
<h1>交友-CMS</h1>
<label for="">
上传图片:<input type="file" >
</label>
<script>
//获取上传控件的对象
var uploadBtn = document.getElementById('uploadBtn');
uploadBtn.onchange = function(e){
var file = e.target.files[0]; //获取上传的文件
var param = new FormData();
param.append('file',file);
var config = {
headers : {
'Content-Type':'multipart/form-data' //头部文件类型定义
}
};
//调用后端uploadBannerImg接口,具体定义在routes文件夹下index.js内
axios.post('/uploadBannerImg',param,config).then((res)=>{
console.log( res.data )
});
}
</script>
</body>
</html>