随州网站建设有哪些,电商网站开发系统架构,广告优化师的职业规划,推广网站代码写在开始:一个搬砖程序员的随缘记录上一章写了从零开始VueSpringBoot后台管理系统#xff1a;Vue3TypeScript项目搭建 VueTypeScript的前端项目已经搭建完成了 这一章的内容是引入element-plus和axios实现页面的布局和前后端数据的串联#xff0c;实现一个登陆的功能#x…写在开始:一个搬砖程序员的随缘记录上一章写了从零开始VueSpringBoot后台管理系统Vue3TypeScript项目搭建 VueTypeScript的前端项目已经搭建完成了 这一章的内容是引入element-plus和axios实现页面的布局和前后端数据的串联实现一个登陆的功能跳转到首页 现在前端项目的一个结构目录 文章目录 一、引入element-plus1、登录页面构建2、登录页面加入校验 二、引入axios1、下载axios2、配置axios3、请求后端数据跨域处理4、首页5、实现登录 一、引入element-plus
npm i element-plus在src/main.js中加入element-plus
import { createApp } from vue
import App from ./App.vue
import router from ./router
import ElementPlus from element-plus
import element-plus/dist/index.csscreateApp(App).use(router).use(ElementPlus).mount(#app)1、登录页面构建
修改登陆页面src/views/Login.vue
templateel-form refform :modelloginUser label-width55px classloginFormh3 classlogin_title登录/h3el-form-item label用户名el-input v-modelloginUser.username placeholder请输入用户名/el-input/el-form-itemel-form-item label密码el-input v-modelloginUser.password typepassword placeholder请输入密码/el-input/el-form-itemel-form-item stylewidth: 100%el-button typeprimary stylewidth: 100%;background: #505458;border: none登录/el-button/el-form-item/el-form
/templatescript langts
import { reactive } from vueexport default {name: Login,setup() {// 表单字段const loginUser reactive({username: ,password: })return { loginUser }},
}
/scriptstyle
.loginForm {border-radius: 15px;background-clip: padding-box;margin: 90px auto;width: 350px;padding: 35px 35px 35px 35px;background: #fff;border: 1px solid #eaeaea;box-shadow: 0 0 25px #cac6c6;
}.login_title {margin: 0px auto 40px auto;text-align: center;color: #505458;
}/style运行项目可以看到现在的登录界面算比较美观了
2、登录页面加入校验
现在给登录页面表单添加简单的校验规则 关键点
script部分
template部分 加入表单校验Login.vue完整代码
templateel-form refform :modelloginUser :rulesrules label-width55px classloginFormh3 classlogin_title登录/h3el-form-item label账号 propusernameel-input v-modelloginUser.username placeholder请输入用户名/el-input/el-form-itemel-form-item label密码 proppasswordel-input v-modelloginUser.password typepassword placeholder请输入密码/el-input/el-form-itemel-form-item stylewidth: 100%el-button typeprimary stylewidth: 100%;background: #505458;border: none登录/el-button/el-form-item/el-form
/templatescript langts
import { reactive } from vueexport default {name: Login,setup() {// 表单字段const loginUser reactive({username: ,password: })//登录表单校验const rules reactive({username: [{ required: true, message: 请输入用户名, trigger: blur },{ min: 6, max: 12, message: 长度在 6 到 12 个字符, trigger: blur }],password: [{ required: true, message: 请输入密码, trigger: blur },{ min: 6, max: 20, message: 长度在 6 到 20 个字符, trigger: blur }]})return { loginUser, rules }},
}
/scriptstyle
.loginForm {border-radius: 15px;background-clip: padding-box;margin: 90px auto;width: 350px;padding: 35px 35px 35px 35px;background: #fff;border: 1px solid #eaeaea;box-shadow: 0 0 25px #cac6c6;
}.login_title {margin: 0px auto 40px auto;text-align: center;color: #505458;
}/style登录页面效果
二、引入axios
1、下载axios
npm i axios2、配置axios
在src下新建api文件夹在api文件夹下新建request.ts
import axios,{InternalAxiosRequestConfig,AxiosResponse} from axios
import { ElLoading } from element-plus
import { ElMessage } from element-pluslet loading:any;
const startLoading () {interface Options{lock: boolean;text: string;background: string;}const options:Options {lock: true,text: Loading,background: rgba(0, 0, 0, 0.7)}loading ElLoading.service(options)
}
const endLoading (){loading.close()
}// 请求拦截
axios.interceptors.request.use((config:InternalAxiosRequestConfigany){// 开始LoadingstartLoading()return config
})//请求响应拦截
axios.interceptors.response.use((res:AxiosResponseany, any){endLoading()// 成功直接返回响应数据if(res.status 200){return res.data}
},error{endLoading()const { response: res } errorconst msg typeof res.data string ? res.data: res.data.error || 请求错误请稍后重试ElMessage.error(msg)// 错误提醒return Promise.reject(error)
})export default axios在main.ts中引入axios全局挂载axios main.ts完整代码
import {createApp} from vue
import App from ./App.vue
import router from ./router
// 引入element-plus
import ElementPlus from element-plus
// 引入element-plus样式
import element-plus/dist/index.css
// 引入axios
import axios from /api/requestconst app createApp(App)
// 全局挂载axios
app.config.globalProperties.$axios axios
app.use(router)
app.use(ElementPlus)
app.mount(#app)3、请求后端数据跨域处理
在项目根目录新建 vue.config.js 文件
module.exports {devServer: {open: true,//前端项目域名host: localhost,//前端项目端口port: 8081,https: false,//配置跨域proxy: {/api: {//后端项目请求接口地址target: http://localhost:8082/api/,//如果要代理 websockets配置这个参数ws: true,//允许跨域changOrigin: true,pathRewrite: {//请求的时候使用这个api就可以^/api: }}}}
}4、首页
在src/views下新建首页页面Home.vue
templatediv首页/div
/templatescriptexport default {name: Index}
/script5、实现登录
加入请求登录方法 在页面中点击登录按钮时请求登录方法
登录方法代码
const login () {proxy.$axios({url: /api/user/login,method: post,data: loginUser}).then((res: any) {if (res.code 200) {proxy.$message({message: 登录成功,type: success})router.push(/home)} else {proxy.$message({message: res.data.msg,type: error})}})console.log(login)}Login.vue整体代码
templateel-form refform :modelloginUser :rulesrules label-width55px classloginFormh3 classlogin_title登录/h3el-form-item label账号 propusernameel-input v-modelloginUser.username placeholder请输入用户名/el-input/el-form-itemel-form-item label密码 proppasswordel-input v-modelloginUser.password typepassword placeholder请输入密码/el-input/el-form-itemel-form-item stylewidth: 100%el-button typeprimary stylewidth: 100%;background: #505458;border: none clicklogin()登录/el-button/el-form-item/el-form
/templatescript langts
import {reactive, getCurrentInstance} from vue
import {useRouter} from vue-routerexport default {name: Login,setup() {// ts-ignoreconst {proxy} getCurrentInstance()// 表单字段const loginUser reactive({username: ,password: })//登录表单校验const rules reactive({username: [{required: true, message: 请输入用户名, trigger: blur},{min: 6, max: 12, message: 长度在 6 到 12 个字符, trigger: blur}],password: [{required: true, message: 请输入密码, trigger: blur},{min: 6, max: 20, message: 长度在 6 到 20 个字符, trigger: blur}]})const router useRouter()const login () {proxy.$axios({url: /api/user/login,method: post,data: loginUser}).then((res: any) {if (res.code 200) {proxy.$message({message: 登录成功,type: success})router.push(/home)} else {proxy.$message({message: res.data.msg,type: error})}})console.log(login)}return {loginUser, rules, login}},
}
/scriptstyle
.loginForm {border-radius: 15px;background-clip: padding-box;margin: 90px auto;width: 350px;padding: 35px 35px 35px 35px;background: #fff;border: 1px solid #eaeaea;box-shadow: 0 0 25px #cac6c6;
}.login_title {margin: 0px auto 40px auto;text-align: center;color: #505458;
}
/style登录成功然后跳转到首页的功能就实现了
Over
