阿超 > uniapp实现简单登录注册

uniapp实现简单登录注册

2021-02-14

前端

生活的情况越艰难，我越感到自己更坚强，甚而也更聪明。——高尔基

首先去uniapp官网

可以看到介绍

uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉/淘宝）、快应用等多个平台。

DCloud公司拥有600万开发者用户，几十万应用案例、12亿手机端月活用户，数千款uni-app插件、70+微信/qq群。阿里小程序工具官方内置uni-app（详见），腾讯课堂官方为uni-app录制培训课程（详见），开发者可以放心选择。

uni-app在手，做啥都不愁。即使不跨端，uni-app也是更好的小程序开发框架（详见）、更好的App跨平台框架、更方便的H5开发框架。不管领导安排什么样的项目，你都可以快速交付，不需要转换开发思维、不需要更改开发习惯。

首先我们去下载官方IDE——HBuilderX

image-20210214102923583

解压

image-20210214103031733

启动IDE——HBuilderX.exe

image-20210214103405219

我们点击文件->新建->项目，选择uni-app

image-20210214103619889

image-20210214103724325

对于快捷键修改，我们可以采用这种方式：

点击HBuilderX上方的工具->自定义快捷键

可以看到这里出现两个页面，我们把要修改的快捷键，放到右边来，例如这样

1
2
3
4
5
6
[
    //删除行
    {"key":"ctrl+y","command":"redo"}
    //选择当前词或下一个相同词
    // {"key":"ctrl+e","command":"editor.action.addSelectionToNextFindMatch"}
]

image-20210214105437303

然后ctrl+s保存

我们使用一下刚才的快捷键ctrl+y

可以看到弹窗供你选择，这个地方是因为我们的ctrl+y与删除行重复了，所以需要选择

image-20210214105723791

我们运行一下

选中左边的项目，然后点击运行->运行到浏览器，然后选择对应的浏览器即可看到

我们刚刚创建的项目是这个样子的

image-20210214103937785

我们先来修改上方标题栏名称，把uni-app修改成我们的myapp

找到pages.json，修改navigationBarTitleText属性

注意，这里上方的pages是针对页面修改，下方的globalStyle是针对全局生效，上方会覆盖下面的设置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
{
	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
		{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "myapp"
			}
		}
	],
	"globalStyle": {
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "myapp",
		"navigationBarBackgroundColor": "#F8F8F8",
		"backgroundColor": "#F8F8F8"
	}
}

顺便我们改个头像吧

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<template>
	<view class="content">
		<image ondragstart="return false" class="logo" src="/imgs/oss/2020-06-01/head.jpg"></image>
		<view class="text-area">
			<text class="title">{{title}}</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello'
			}
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>

修改完后保存，可以看到我们项目自动编译了，刷新页面可以看到修改成功

假设我们需要修改端口，即可到manifest.json中找到H5配置`，然后在端口一栏输入我们的端口即可

image-20210214113814383

image-20210214110041981

我们引入Element-UI，首先确保使用管理员身份运行HbuilderX

image-20210214111921639

然后点击下方终端按钮，然后安装

image-20210214112034587

执行命令

1
set-ExecutionPolicy RemoteSigned

然后执行

1
cnpm i element-ui

最后在main.js中引用

1
2
3
4
5
6
7
8
9
10
11
12
13
import Vue from 'vue'
import App from './App'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.config.productionTip = false
Vue.use(ElementUI);
App.mpType = 'app'

const app = new Vue({
    ...App
})
app.$mount()

image-20210214113841012

接下来就可以使用Element-UI进行开发了

配置一个api.js，供我们请求接口

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
const BASE_API = 'http://localhost:8080'
const API_LOGIN = '/user/login'
const API_REGISTER = '/user/register'


function get(url, data, res) {
	request(url, data, res, 'GET')
}

function post(url, data, res) {
	request(url, data, res, 'POST')
}

function request(url, data, res, method) {
	let header = method == 'POST' ? {
		'Content-Type': 'application/json',
		'token': uni.getStorageSync('token')
	} : {
		'token': uni.getStorageSync('token')
	};
	uni.request({
		url: BASE_API + url,
		method: method,
		header: header,
		data: data,
		success: (data) => {
			if (data.data.code === 200) {
				res(data.data)
			} else {
				uni.showToast({
					title: data.data.msg,
					icon: 'none',
					duration: 2000 //时间
				});
			}
		}
	});
}


export default {
	get: function(url, data, res) {
		return get(url, data, res);
	},
	post: function(url, data, res) {
		return post(url, data, res);
	},
	API_LOGIN,
	API_REGISTER
}

然后是页面

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
<template>
	<view class="content">
		<image ondragstart="return false" class="logo" src="/imgs/oss/2020-06-01/head.jpg"></image>
		<el-row>
			<el-col>
				<el-input placeholder="用户名" v-model="user.username" clearable></el-input>
			</el-col>
		</el-row>
		<el-row>
			<el-col>
				<el-input placeholder="请输入密码" v-model="user.password" show-password></el-input>
			</el-col>
		</el-row>
		<el-row>
			<el-col>
				<el-button-group>
					<el-button class="loginBtn" type="primary" @click="register">注册</el-button>
					<el-button class="loginBtn" type="primary" @click="login">登陆</el-button>
				</el-button-group>
			</el-col>
		</el-row>
	</view>
</template>

<script>
	import api from '../../static/common/util/api.js';
	export default {
		data() {
			return {
				user: {
					username: '',
					password: ''
				}
			}
		},
		onLoad() {

		},
		methods: {
			login() {
				api.post(api.API_LOGIN,this.user,(data)=>{
					uni.showToast({
						title: data.msg,
						icon: 'success',
						duration: 2000
					});
					uni.setStorageSync('token', data.token);
				})
			},
			register() {
				api.post(api.API_REGISTER,this.user,(data)=>{
					uni.showToast({
						title: data.msg,
						icon: 'success',
						duration: 2000
					});
				})
			}
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}

	.loginBtn {
		margin-top: 20rpx;
	}
</style>

我们的登录、注册功能就简单实现啦~

项目已经上传到Gitee上去啦