# school-uniapp

**Repository Path**: blaunicorn/school-uniapp

## Basic Information

- **Project Name**: school-uniapp
- **Description**: 学习B站阿东编程项目
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-04-06
- **Last Updated**: 2021-06-26

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

### 学习阿东编程讲解的uni-app（[bilibili.com](https://space.bilibili.com/176393139/video?tid=0&page=1&keyword=&order=pubdate)
根据视频开发的[源码](https://gitee.com/blaunicorn/school-uniapp.git)
### 01-07初始化框架
 新建四个页面，依次是 index allowance my notice
 在pages.json中配置页面
 ```
 "pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
 	 {
 		"path": "pages/index/index",
 		"style": {
 			"navigationBarTitleText": "用户登录"
 		}
 	}, {
 		"path": "pages/plan/plan",
 		"style": {
 			"navigationBarTitleText": "每周计划",
 			"enablePullDownRefresh": false
 		}
 
 	},{
 		"path": "pages/notice/notice",
 		"style": {
 			"navigationBarTitleText": "通知",
 			"enablePullDownRefresh": false
 		}
 
 	}, {
 		"path": "pages/allowance/allowance",
 		"style": {
 			"navigationBarTitleText": "津贴",
 			"enablePullDownRefresh": false
 		}
 
 	}, {
 		"path": "pages/my/my",
 		"style": {
 			"navigationBarTitleText": "",
 			"enablePullDownRefresh": false
 		}
 
 	}
 ],
 // 底部tab菜单
 "tabBar": {
 	"color": "#7A7E83",
 	"selectedColor": "#3cc51f",
 	"borderStyle": "black",
 	"backgroundColor": "#ffffff",
 	"list": [{
 		"pagePath": "pages/plan/plan",
 		"iconPath": "static/image/plan1.png",
 		"selectedIconPath": "static/image/plan2.png",
 		"text": "计划"
 	}, {
 		"pagePath": "pages/notice/notice",
 		"iconPath": "static/image/notice1.png",
 		"selectedIconPath": "static/image/notice2.png",
 		"text": "通知"
 	}, {
 		"pagePath": "pages/allowance/allowance",
 		"iconPath": "static/image/allowance1.png",
 		"selectedIconPath": "static/image/allowance2.png",
 		"text": "津贴"
 	}, {
 		"pagePath": "pages/my/my",
 		"iconPath": "static/image/my1.png",
 		"selectedIconPath": "static/image/my2.png",
 		"text": "我的"
 	}]
 },
 ```
 在iconfont下载需要的图片
 
 ### 01-09数据库配置
 该小程序框架结构
小程序《-》api接口（phpGrace)《-》数据库Mysql
我是利用宝塔系统，还是比较方便的
```
// 查看php配置
<?php
echo phpinfo();
?>
```
mysql数据库
```
// 验证数据库是否正确连接
<?php
$servername = "localhost";
$username = "wcy_school_app";  // 用户名·
$password="dGZfEfFZA7zb5kw4";  // 密码
// 创建连接
$conn = new mysqli($servername, $username, $password);
// 检测连接
if ($conn->connet_error) {
die("连接失败：".$conn->connet_error);
}
echo "连接成功";
?>
```
如果是mssql数据库
第一步：下载SQL Server驱动
1、下载对应php版本的拓展
官方下载地下：Download the Microsoft Drivers for PHP for SQL Server - SQL Server
[官方](https://link.zhihu.com/?target=https%3A//docs.microsoft.com/en-us/sql/connect/php/download-drivers-php-sql-server%3Fview%3Dsql-server-2017)
下载完毕解压出来把php_pdo_sqlsrv_73_nts_x64.dll和php_sqlsrv_73_nts_x64.dll
放到\Extensions\php\php7.3.4nts\ext(放在你安装PHP的ext目录下面)
2.设置php.ini，把这二个dll模块加进来。
extension=php_sqlsrv_7_nts_x86.dll
extension=php_pdo_sqlsrv_7_nts_x86.dll
注意：PHP Version 7.3.4对应的版本是php_sqlsrv_7_nts_x86.dll和php_pdo_sqlsrv_7_nts_x86.dll
第二步：安装ODBC驱动11
驱动11支持所有版本，所以果断下载11版本：官方下载地下：https://www.microsoft.com/en-us/download/details.aspx?id=36434
下载成功直接安装在mssql服务器上就可以
注意：此时要重新启动各种服务.
第三步：写代码测试是否能成功
```
<?php
 $server = "localhost"; //服务器名称
 $uid = "xxx"; //数据库用户名 
 $pwd = "123456"; //数据库密码 
 $db = "test"; // 数据库名
 $connectionInfo=array("UID"=>$uid,"PWD"=>$pwd,"Database"=>$db);
 $conn =sqlsrv_connect($server,$connectionInfo); 
 if( $conn == false) { echo "连接失败！"; die( var_dump( sqlsrv_errors(), true)); }
 else{ echo "成功连接"; }
```

#### phpgrace 没调试成功，改成node.js后台20210408
#### phpgrace 测试成功 20210519
上次错误是由于配置静态路径错误
```
    # nginx
    # 20210407 增加 phpgrace 伪静态
    # 文件夹 /www/wwwroot/www.tisuba.com/wordpress/school-uniapp/phpGrace;
    # 浏览路径 www.tisuba.com/school-uniapp/phpGrace
    location /school-uniapp/phpGrace/admin {
    index  index.html index.htm index.php;
      if (!-e $request_filename){
          rewrite ^/admin/(.*)$ /school-uniapp/phpGrace/admin/index.php?pathInfo=$1;
        }
    }
    location /school-uniapp/phpGrace/ {
        index  index.html index.htm index.php;
        if (!-e $request_filename){
          rewrite ^(.*)$ /school-uniapp/phpGrace/index.php?pathInfo=$1;
        }
    }
    # 增加伪静态结束
```
[联接](http://www.tisuba.com/school-uniapp/phpGrace/index.php)

####   1-10 App登录功能后台api代码编写
```
# phpserver/phpGrace/app/controllers 增加login.php index.php index.html文件
# login.php代码，index()是一个默认方法
#  访问http://www.tisuba.com/school-uniapp/phpGrace/login/index.php 测试是否正常
<?php
class loginController extends grace {
	public function index() {
		echo "login-index";
	}
}
```

### 1-12 express图形验证码编写
1.安装svg-captcha依赖,.后续过程需要使用到session,所以要安装express-session依赖,session的认证机制必须依赖cookie，所以还应该同时安装一个cookie-parser
```
npm install --save svg-captcha
npm install --save cookie-parser
npm install --save express-session
```

2之后定义cookie解析器，注意，该定义必须写在路由分配之前：
```
const express = require("express");
const bodyParser = require("body-parser");
const app = new express();
app.use(cookieParser());
app.use(session({
    secret: 'secret', // 对session id 相关的cookie 进行签名
    resave: true,
    saveUninitialized: false, // 是否保存未初始化的会话
    cookie: {
        maxAge: 1000 * 60 * 3, // 设置 session 的有效时间，单位毫秒
    },
}));
app.use(bodyParser.json({ limit: '50mb' }));
app.use(bodyParser.urlencoded({ limit: '50mb', extended: true }));
```

3.验证码获取接口,将验证码存储在session中,并将生成验证码后返回给前端
```
app.post('/api/captcha', function (req, res) {
	/ 验证码，有两个属性，text是字符，data是svg代码
    var captcha = svgCaptcha.create({
        size: 4,  //验证码长度
        width: 100, //svg宽度
        height: 50, //svg高度
        // background: "#eee",//svg背景色 ,
        noise: 2, //干扰线条数
        fontSize: 35, //字体大小
        ignoreChars: 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxz',   //验证码字符中排除
        color: false // 验证码的字符是否有颜色，默认没有，如果设定了背景，则默认有           
    });
	 // 保存到session,忽略大小写
    req.session.captcha = captcha.text.toLowerCase();
    res.type('svg');
	// 返回数据直接放入页面元素展示即可
    res.status(200).send({
        code: 200,
        result: captcha.data
    });
});
```

4.vue前台使用
```
<div v-html="svgData"></div>
```
在挂载完成时发送获取验证码请求,这里需要使用跨域代理
```
mounted() {
    this.$http.post("/admin/captcha", {}).then(resData =>  {
      if (resData.body.code == 200) {
        this.svgData = resData.body.result;
      }
    });
  }
```

5.验证方法
所有的验证逻辑都要在服务端进行，不然这个验证码就没什么卵用了，所以正确的逻辑应该是，当去请求敏感接口的时候，把客户端输入的验证码连同接口需要的参数一块传给node层，在node里判断用户输入的验证码是不是跟之前存到session里的验证码一致，如果不一致，则验证不通过，直接返回数据，不请求后台；如果一致，则验证通过，再由node发起请求，去调用后台接口。
```
router.get('/cerification-codeService/send-verification-code', function (req, res, next) {
    var url = urlMap.useraccountserver + '/cerification-codeService/new-send-verification-code';
    var imageCode = req.query.imageCode.toLowerCase();
    var qs = req.query;
    for (let key in qs) {
        if (key === 'imageCode') {
            delete qs[key];
        }
    }
    if (imageCode !== req.session["randomcode"]) {
        res.send({
            code: 4
        });
        return false;
    }
    var options = {
        url: url,
        method: 'GET',
        json: true,
        qs: qs
    };

    clusterUtility.API.optionsFilter(req, options);
    request(options, function (error, response, body) {
        res.send(body);
    });
});
```

### 1-21 使用缓存实现app自动登录
```
// pages/index/index.vue
 // look  
	onLoad() {
		var username = uni.getStorageSync('username');
		var userphone = uni.getStorageSync('userphone');
			
		if (username && userphone) {
			uni.swithcTab({
				url: '/pages/plan/plan'
			})
		}
		this.getCode()
		if (localStorage.getItem('time') > 0) {
			this.getPhoneCode(localStorage.getItem('time'))
		}
	},
	...
	checkLogin() {
		uni.request({
			url: 'http://localhost:3000/api/user/login',
			method: 'POST',
			data: {
				UserName: this.username,
				UserPassword: this.password,
				vcode: this.vcode,  // 图形验证码
				// 增加登录类型和手机号/手机验证码
				loadType: this.loadType,
				UserPhone: this.phoneNumber,
				phoneVerityCode: this.phoneVerityCode,
				
			},
			withCredentials: true,
			success: res => {
				console.log(res)
				if (res.data.code === 200) {
					uni.showToast({
						title: '登录成功',
						icon: 'success'
					});
					uni.setStorageSync('username',res.data.data.UserName + '')	
					uni.setStorageSync('userphone',res.data.data.UserPhone + '')
					// 跳转到每周计划界面，适合tabbar中的页面
					uni.switchTab({
						url: "../plan/plan"
					})
				} else {
					uni.showToast({
						title: '用户名或密码或手机号错误',
						icon: 'loading'
					});
				}
			},
			fail: () => {},
			complete: () => {}
		})
	},
```

```
// pages/my/my.vue
			logout() {
					uni.removeStorageSync('username');
					uni.removeStorageSync("userphone");
					uni.showToast({
						title:'注销成功！'
					})
					uni.redirectTo({
						url:'/pages/index/index'
					})
					
			},
```

### 1-22 使用list显示列表数据
```
// pages/plan/plan.vue
// 需要安装list组件 https://ext.dcloud.net.cn/plugin?id=24
//  同时，需要 安装sass插件 https://ext.dcloud.net.cn/plugin?name=compile-node-sass
<template>
	<view>
		<uni-list>
			<uni-list-item v-for="(item,index) in items" :key="index" :title="item.name" note="def" showArrow="true" clickable @tap="todetail(item)"></uni-list-item>
		</uni-list>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				items: [{
					id: 1,
					name: '1abc'
				}, {
					id: 2,
					name: '2abc'
				}, {
					id: 3,
					name: '3abc'
				}, {
					id: 4,
					name: '4abc'
				}, {
					id: 5,
					name: '5abc'
				}, {
					id: 6,
					name: '6abc'
				}, ]
			}
		},
		methods: {
			todetail(e) {
				uni.showToast({
					title: e.name,
					icon: 'none'
				})
			}
		}
	}
</script>

<style>

</style>

```

```
// 后端api rest
// http://localhost:3000/api/rest/ad
// http://localhost:3000/api/rest/user 
```


### 简易的命令行入门教程:
Git 全局设置:
```
git config --global user.name "blackunicorn"
git config --global user.email "blackunicorn@163.com"
```
### 创建 git 仓库:
```
mkdir school-uniapp
cd school-uniapp
git init
touch README.md
git add README.md
git commit -m "first commit"
git remote add origin https://gitee.com/blaunicorn/school-uniapp.git
git push -u origin master
```
### 已有仓库?
```
cd existing_git_repo
git remote add origin https://gitee.com/blaunicorn/school-uniapp.git
git push -u origin master
```