ruoyi-app学习路线

一、一条线

先使用hubuilder新建一个空白的uniapp
在目录根部有个package.son，是用来设定入门vue的，默认情况下是index.vue，我们新建一个设定一个新的入口页面：login.vue（新建目录pages，用来存放所有页面（vue页面），然后在pages目录下新建login.vue），在packge.son中调整顺序：

bash 复制代码

	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
		// {
		// 	"path": "pages/index/index",
		// 	"style": {
		// 		"navigationBarTitleText": "uni-app"
		// 	}
		// },
		{
			"path": "pages/login",
			"style": {
				"navigationBarTitleText": "登录123"
			}
		}
	],

pages目录下以后默认存放可视化vue页面（即一个由html\js\css于一体的界面）
接下来思路是这样的：先login.vue里先写一个验证码页面，调用ruoyi远程的后端接口，调用成功则说明前端通，然后将调用接口改为本地后端，即可写后端controller那一套。
login.vue->通过js函数getHouDuan调用api/login.js（新建api目录存放各个页面对应的request请求，login.js用来存放login.vue登录相关的各种request请求的界面），login.js调用一个封装了原生request的utils/request.js（封装了toast提示，error报错等），request.js去调根目录/config.js（只写了baseUrl）来拼接出完整的url代码并发送。

需要注意的是login.vue调login.js的时候需要将login.js里的函数在login.vue里用import {xxxdunction} from 'api/login'

login.js调request需要request.js末尾export default request，并且login.js里要在开头import xx from...（注意引入数据不用{}，引入func需要{}

request.js引入config同理

css 复制代码

<template>
	<view class="normal-login-container">

		<view class="logo-content flex align-center justify-center">
			<image src="/static/logo.png" style="width: 50px;height: 50px"></image>
			<text class="title">若依移动端登陆123</text>
			<input placeholder="请输入验证码" class="input" maxlength="4" />
			<image :src="codeUrl" class="login-code-img"></image>
		</view>
		
	</view>
</template>

<script>
	import { getCodeImg,getBuildSyqList} from '@/api/login'
	export default {
		created() {
		//	this.getHouDuan()
			this.getPic()
		},
		data() {
			return {
				codeUrl: '',
				loginForm: {
					username: '',
					password: '',
					code: '',
					uuid: ''
				}
			};
		},
		methods:{
			// getHouDuan(){
			// 	getBuildSyqList().then(res =>){
			// 		console.log('SYQbelike：',res)
			// 	}
			// },
			getPic(){
				console.log('hereeeeeeeeeeee')
				getCodeImg().then(res => {
					console.log('00000000000000',res)
					// this.loginForm.uuid = res.uuid
					// this.codeUrl = 'data:image/gif;base64,' + res.img
					// console.log('1111111111',this.codeUrl)
				})
			},
			
		}
	}
</script>

<style lang="scss">

</style>

javascript 复制代码

import request from '@/utils/request'
export function getCodeImg(){
	console.log('here2222222222222')
	return request({
		url: '/build/syq/list',
		
		method:'get'
	})
}

export function getBuildSyqList(){
	return request({
		url:'/captchaImage',
		method:'get'
	})
}

注意这里如果将getCodeImg的url改成'/captchaImage'则可以成功访问远端验证码接口，但是这里想测试一下我本地写的/build/syq/list后端接口，显示没有登陆，这是因为后端persimmon.js进行了登陆验证，这就是明天要学的东西了。

request.js

javascript 复制代码

import config from '@/config'
import { toast } from '@/utils/common'
import { getToken } from "./auth"

const baseUrl = config.baseUrl
const request = config => {
    const isToken = (config.headers || {}).isToken === false
    config.header = config.header || {}
    if(getToken() && !isToken) {
        config.header['Authorization'] = 'Bearer ' + getToken()
    }
    return new Promise((resolve, reject) => {
        uni.request({
            timeout: 10000,
            method: config.method || 'get',
            url: baseUrl + config.url,
            data: config.data,
            header: config.header
        }).then(response => {
            let [error, res] = response
            if(error) {
                toast('后端接口异常')
                reject('后端接口异常')
            }
            const code = res.data.code || 200
            const msg = res.data.msg
            if(code !== 200) {
                toast(msg)
                reject(code)
            }
            resolve(res.data)
        })
    })
}
export default request

config.js

javascript 复制代码

module.exports = {
	baseUrl: 'http://localhost:8080',
}

今天清晰明了的知道了前端的架构。下一步：

1.学登录接口，通过权限认证和后端接口一一对应，可以尝试根据若依的app后端写，量少可以复现前后端。

2.学uni-app及element框架，能更好美观前端页面

3.前一段时间学的：model :def等要用上。

ruoyi-app学习路线

一、一条线

login.vue页面：

login.js

request.js

config.js