廊坊哪里做网站好,如何写好软文,东莞免费做网站公司,优秀网站的特点基础项目构建
创建VUE初始工程
确保自己下载了node.js和npm node -v //查看node.js的版本
npm -v //查看npm的版本
npm i vue/cli -g //安装VUE CLI 创建
以管理员身份运行 输入#xff1a;vue ui 就会进入 点击创建 自定义项目名字#xff0c;选择npm管理 结…基础项目构建
创建VUE初始工程
确保自己下载了node.js和npm node -v //查看node.js的版本
npm -v //查看npm的版本
npm i vue/cli -g //安装VUE CLI 创建
以管理员身份运行 输入vue ui 就会进入 点击创建 自定义项目名字选择npm管理 结构
用vscode打开这个项目 运行
打开终端
快捷键ctrlj 输入npm run serve回车 然后进入给的网址 修改端口
vue.config.js const { defineConfig } require(vue/cli-service)
module.exports defineConfig({transpileDependencies: true,devServer: {port: 8181}
})现在我们就是在这个界面开始编写我们的代码
2024.7.4 学生登录界面
参考这篇文章
Vue 实现登录注册功能前后端分离完整案例 | 软件研会
参考文章中遇到的一些问题
问题解决error: Component name “xxx” should always be multi-word.
解决
解决error: Component name “xxx” should always be multi-word._error component name about should always be mult-CSDN博客
问题import VueAxios from vue-axios中vue-axios找不到报错
解决
npm i vue-axios
问题点击登录之后一直网页报错 解决措施麻了我各种翻阅资料居然是这里出错了气死了花费了我2小时
src\views\login\Login.vue 问题基本搞定还有一些小细节 我们不需要注册这个版本所以我没有搞。
基本就ok了 所有的代码
src\App.vue templatediv idapprouter-view//div
/templatescriptexport default {name: App,components: {}
}
/scriptstyle
#app {font-family: Avenir, Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;
}
/stylesrc\main.js
import Vue from vue
import App from ./App.vue
import store from ./storeimport router from ./router //路由 2
import VueRouter from vue-router // 路由 1import ElementUI from element-ui; // Element 1
import element-ui/lib/theme-chalk/index.css; // Element 2import axios from axios
import VueAxios from vue-axios// 关闭 Vue 的生产提示
Vue.config.productionTip false// 使用插件
Vue.use(ElementUI); // Element 3
Vue.use(VueRouter) // 路由 3
Vue.use(VueAxios, axios) // 使用 axios 插件// 创建 Vue 实例对象
new Vue({router,store,render: h h(App)
}).$mount(#app)vue.config.js
const { defineConfig } require(vue/cli-service)
module.exports defineConfig({transpileDependencies: true,lintOnSave: false,devServer: {port: 8181,// 代理服务器可以将路由中的指定前缀转发到指定的后端服务器中proxy: {/api: {target: http://localhost:8080,ws: true, // 是否启用websocketschangeOrigin: true, // 代理时是否更改hostpathRewrite: {^/api: //这里理解成用/api代替target里面的地址}}}}
})src\views\login\Login.vue
templatedivel-card classbox-cardh2登录/h2el-form:modelruleFormstatus-icon:rulesrulesrefruleFormlabel-positionleftlabel-width70pxclasslogin-fromel-form-item label用户名 propusernameel-input v-modelruleForm.username/el-input/el-form-itemel-form-item label密码 proppasswordel-inputtypepasswordv-modelruleForm.passwordautocompleteoff/el-input/el-form-item/el-formdiv classbtnGroupel-buttontypeprimaryclicksubmitForm(ruleForm)v-loadingloading登录/el-buttonel-button clickresetForm(ruleForm)重置/el-buttonrouter-link to/registerel-button stylemargin-left: 10px注册/el-button/router-link/div/el-card/div
/templatescriptexport default {data() {return {ruleForm: {username: ,password: ,},rules: {username: [{ required: true, message: 用户名不能为空, trigger: blur },],password: [{ required: true, message: 密码不能为空, trigger: blur },],},loading: false, // 是否显示加载动画};},methods: {submitForm(formName) {// 验证表单中的账号密码是否有效因为在上面rules中定义为了必填 required: truethis.$refs[formName].validate((valid) {// 点击登录后让登录按钮开始转圈圈展示加载动画this.loading true;// 如果经过校验账号密码都不为空则发送请求到后端登录接口if (valid) {let _this this;// 使用 axios 将登录信息发送到后端this.axios({url: /api/admin/student/login, // 请求地址method: post, // 请求方法headers: { // 请求头Content-Type: application/json,},data: { // 请求参数username: _this.ruleForm.username,password: _this.ruleForm.password,},}).then((res) { // 当收到后端的响应时执行该括号内的代码res 为响应信息也就是后端返回的信息if (res.data.code 1) { // 当响应的编码为 1 时说明登录成功// 将用户信息存储到sessionStorage中sessionStorage.setItem(userInfo, JSON.stringify(res.data.data));// 跳转页面到首页this.$router.push(/home);// 显示后端响应的成功信息this.$message({message: res.data.data,type: success,});} else { // 当响应的编码不为 1 时说明登录失败// 显示后端响应的失败信息this.$message({message: res.data.msg,type: warning,});}// 不管响应成功还是失败收到后端响应的消息后就不再让登录按钮显示加载动画了_this.loading false;console.log(res);});} else { // 如果账号或密码有一个没填就直接提示必填不向后端请求console.log(error submit!!);this.loading false;return false;}});},resetForm(formName) {this.$refs[formName].resetFields();},},
};
/scriptstyle scoped
/* 设置登录面板居中宽度为400px */
.box-card {margin: auto auto;width: 400px;
}
/* 设置登录面板中的表单居中 */
.login-from {margin: auto auto;
}
/style
src\views\home\Home.vue
templatedivh2欢迎{{ user.username }}您的 uid 为{{ user.id }}/h2el-button clicklogout 登出 /el-button/div
/templatescript
export default {data() {return {user: {username: ,id: null,},};},methods: {logout(){// 移除本地用户登录信息sessionStorage.removeItem(userInfo);// 跳转页面到登录页this.$router.push(/login);}},mounted() {if (sessionStorage.getItem(userInfo)) {// 将用户信息存储到sessionStorage中this.user JSON.parse(sessionStorage.getItem(userInfo));}},
};
/scriptstyle scoped
/style
src\router\index.js
// 此文件专门负责项目的路由import VueRouter from vue-router// 引入组件
import Login from ../views/login/Login
import Register from /views/register/Register.vue
import Home from /views/home/Home.vue// 创建并暴露一个路由器
export default new VueRouter({mode: history, // 路由模式该模式不会在地址中显示井号#routes: [{path: /, // 路径redirect: /login // 重定向},{path: /login, // 路径component: Login // 跳转到的组件},{path: /register, // 路径component: Register // 跳转到的组件},{path: /home, // 路径component: Home // 跳转到的组件}]
})
修改一下登录界面
去掉注册功能
src\views\login\Login.vue
删除红色框部分 src\views\register src\router\index.js 添加背景图片
src\views\login\Login.vue 测试 完整代码
src\views\login\Login.vue
templatediv classlogin-backgroundel-card classbox-cardh2体育器材管理后台/h2el-form:modelruleFormstatus-icon:rulesrulesrefruleFormlabel-positionleftlabel-width70pxclasslogin-fromel-form-item label用户名 propusernameel-input v-modelruleForm.username/el-input/el-form-itemel-form-item label密码 proppasswordel-inputtypepasswordv-modelruleForm.passwordautocompleteoff/el-input/el-form-item/el-formdiv classbtnGroupel-buttontypeprimaryclicksubmitForm(ruleForm)v-loadingloading登录/el-buttonel-button clickresetForm(ruleForm)重置/el-button/div/el-card/div
/templatescriptexport default {data() {return {ruleForm: {username: ,password: ,},rules: {username: [{ required: true, message: 用户名不能为空, trigger: blur },],password: [{ required: true, message: 密码不能为空, trigger: blur },],},loading: false, // 是否显示加载动画};},methods: {submitForm(formName) {// 验证表单中的账号密码是否有效因为在上面rules中定义为了必填 required: truethis.$refs[formName].validate((valid) {// 点击登录后让登录按钮开始转圈圈展示加载动画this.loading true;// 如果经过校验账号密码都不为空则发送请求到后端登录接口if (valid) {let _this this;// 使用 axios 将登录信息发送到后端this.axios({url: /api/admin/student/login, // 请求地址method: post, // 请求方法headers: { // 请求头Content-Type: application/json,},data: { // 请求参数username: _this.ruleForm.username,password: _this.ruleForm.password,},}).then((res) { // 当收到后端的响应时执行该括号内的代码res 为响应信息也就是后端返回的信息if (res.data.code 1) { // 当响应的编码为 1 时说明登录成功// 将用户信息存储到sessionStorage中sessionStorage.setItem(userInfo, JSON.stringify(res.data.data));// 跳转页面到首页this.$router.push(/home);// 显示后端响应的成功信息this.$message({message: res.data.data,type: success,});} else { // 当响应的编码不为 1 时说明登录失败// 显示后端响应的失败信息this.$message({message: res.data.msg,type: warning,});}// 不管响应成功还是失败收到后端响应的消息后就不再让登录按钮显示加载动画了_this.loading false;console.log(res);});} else { // 如果账号或密码有一个没填就直接提示必填不向后端请求console.log(error submit!!);this.loading false;return false;}});},resetForm(formName) {this.$refs[formName].resetFields();},},
};
/scriptstyle scoped
/* 设置登录面板居中宽度为400px */
.box-card {margin: auto auto;width: 400px;
}
/* 设置登录面板中的表单居中 */
.login-from {margin: auto auto;
}/* 背景图片 */
.login-background { background-image: url(/src/assets/bg.jpeg); background-size: cover; background-position: center; height: 100vh; display: flex; /* 如果你想要使用Flexbox来居中el-card */ justify-content: center; /* 水平居中 */ align-items: center; /* 垂直居中 */
}
/style
