vue项目实战-2登录页面美化
vue
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
项目地址:https://gitcode.com/gh_mirrors/vu/vue
免费下载资源
·
-
使用emementPlus图标
npm install @element-plus/icons-vue
注册所有图标
您需要从 @element-plus/icons-vue
中导入所有图标并进行全局注册。
// main.ts
// 如果您正在使用CDN引入,请删除下面一行。
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
const app = createApp(App)
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
app.component(key, component)
}
或者具体引入单个图标,导入后即可引用
improt {User} from '@element-plus/icons-vue'
<el-icon><User /></el-icon>
-
安装axios
npm install axios
在vite.config.js文件中配置vite代理,可以解决跨域问题
export default defineConfig({
server: {
proxy: {
// 选项写法
'/api': {
target: 'http://ceshi13.dishait.cn',
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, '')
}
}
}
})
在src中新建axios.js文件,创建axios对象,暴露出去
import axios from "axios";
const service = axios.create({
baseURL: '/api'
});
export default service
新建api文件夹,其中新建manages.js文件
import axios from "~/axios";
export function login(username,password){
return axios.post('/admin/login',{
username,
password
})
}
之后登录按钮导入login函数,点击调用,引入router
import { useRouter} from 'vue-router'
const router = useRouter()
安装vueuse组件,已使用cookie
npm i @vueuse/integrations
npm i universal-cookie
import { useCookies } from '@vueuse/integrations/useCookies'
const cookie = useCookies()
const submit = () => {
formRef.value.validate((valid) => {
if (!valid) {
return
}
login(form.username, form.password)
.then(res => {
console.log(res);
//todo 提示请求成功
ElNotification({
message: '登录成功',
type: 'success'
})
//保存token
cookie.et('token',res.data.data.token)
//跳转用户首页
router.push("/")
})
.catch(err => {
console.log(err.response.data.msg);
ElNotification({
message: err.response.data.msg || '请求失败',
type: 'error'
})
})
})
}
简单的输入账号密码后,提示跳转完成。
GitHub 加速计划 / vu / vue
207.53 K
33.66 K
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:1 个月前 )
73486cb5
* chore: fix link broken
Signed-off-by: snoppy <michaleli@foxmail.com>
* Update packages/template-compiler/README.md [skip ci]
---------
Signed-off-by: snoppy <michaleli@foxmail.com>
Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 3 个月前
e428d891
Updated Browser Compatibility reference. The previous currently returns HTTP 404. 4 个月前
更多推荐
已为社区贡献4条内容
所有评论(0)