ruoyi-app学习路线
一、一条线
- 先使用hubuilder新建一个空白的uniapp
- 在目录根部有个package.son，是用来设定入门vue的，默认情况下是index.vue，我们新建一个设定一个新的入口页面：login.vue（新建目录pages，用来存放所有页面（vue页面），然后在pages目录下新建login.vue），在packge.son中调整顺序：
"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同理
login.vue页面：
<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>
login.js
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
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 === falseconfig.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] = responseif(error) {toast('后端接口异常')reject('后端接口异常')}const code = res.data.code || 200const msg = res.data.msgif(code !== 200) {toast(msg)reject(code)}resolve(res.data)})})
}
export default requestconfig.js
module.exports = {baseUrl: 'http://localhost:8080',
}
今天清晰明了的知道了前端的架构。下一步：
1.学登录接口，通过权限认证和后端接口一一对应，可以尝试根据若依的app后端写，量少可以复现前后端。
2.学uni-app及element框架，能更好美观前端页面
3.前一段时间学的：model :def等要用上。