前端：基于vue2.0+或3.0+加上element-ui组件框架
后端：springboot+mybatis-plus写接口
通过Axios调用接口完成数据传递
通过router路由完成各页面的跳转
App.vue
<template>
<div>
<router-view></router-view>
</div>
</template>
<script>
import Login from '@/views/Login.vue'
export default {
name: 'app',
components: {
Login
}
}
</script>
<style>
body {
margin: 0px auto;
padding: 0px;
}
</style>
登录界面
注册界面
vue页面实现
LogReg.vue
<template>
<el-form class="login-box">
<el-tabs stretch="true">
<el-tab-pane label="登录用户" value="first"><Login></Login></el-tab-pane>
<el-tab-pane label="注册用户" name="second"><Register></Register></el-tab-pane>
</el-tabs>
</el-form>
</template>
<script>
import Register from '../Register.vue';
import Login from '../Login.vue';
export default {
components: {
Register,
Login
},
data() {
return {
activeName: 'first'
};
},
methods: {
}
};
</script>
<style>
.login-box {
border: 1px solid #DCDFE6;
width: 350px;
margin: 180px auto;
padding: 35px 35px 15px 35px;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
box-shadow: 0 0 25px #909399;
}
</style>
Login.vue
<template>
<div>
<el-form ref="loginForm" :model="loginform" :rules="rules" label-width="80px" >
<h3 class="login-title">欢迎登录</h3>
<el-form-item label="账号" prop="user">
<el-input type="text" placeholder="请输入账号" v-model="loginform.user"/>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input type="password" placeholder="请输入密码" v-model="loginform.password"/>
</el-form-item>
<el-form-item>
<el-button type="primary" :loading="logining" v-on:click="onSubmit()">登录</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
import Axios from 'axios';
export default{
components: {
},
name: "Login",
data() {
return {
activeName: 'first',
logining:false,
loginform: {
user: '',
password: ''
},
// 表单验证，需要在 el-form-item 元素中增加 prop 属性
rules: {
user: [
{required: true, message: '账号不可为空', trigger: 'blur'}
],
password: [
{required: true, message: '密码不可为空', trigger: 'blur'}
]
},
// 对话框显示和隐藏
// dialogVisible: false
}
},
methods: {
onSubmit() {
// console.log(this.form)
// 为表单绑定验证功能
this.$refs.loginForm.validate((valid) => {
if (valid) {
this.logining=true
let _this = this
if (_this.logining == true) {
Axios.get("http://localhost:8181/admin/login",{params:this.loginform}).then(function (res) {
_this.logining=false
// console.log(res.data.code)
if (res.data.code == -1) {
_this.$message.error('用户名不存在');
}
if (res.data.code == -2) {
_this.$message.error('密码错误');
}
if (res.data.code == 0) {
_this.$message({
message: '恭喜你，登录成功',
type: 'success'
});
localStorage.setItem('main',JSON.stringify(res.data.data));
_this.$router.replace({path:'/main'})
}
})
}
}
// 使用 vue-router 路由到指定页面，该方式称之为编程式导航
// this.$router.push("/main");
// } else {
// // return false;
// }
});
}
}
}
</script>
<style scoped>
.login-box {
border: 1px solid #DCDFE6;
width: 350px;
margin: 180px auto;
padding: 35px 35px 15px 35px;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
box-shadow: 0 0 25px #909399;
}
.login-title {
text-align: center;
margin: 0 auto 40px auto;
color: #303133;
}
</style>
Register.vue
<template>
<div>
<el-form ref="registerForm" :model="registerform" :rules="rules" label-width="80px" >
<h3 class="register-title">注册用户</h3>
<el-form-item label="账号" prop="user">
<el-input type="text" placeholder="请输入账号" v-model="registerform.user"/>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input type="password" placeholder="请输入密码" v-model="registerform.password"/>
</el-form-item>
<el-form-item>
<el-button type="primary" :loading="logining" v-on:click="onSubmit()">注册</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
import Axios from 'axios';
export default{
data() {
return {
logining:false,
registerform: {
user: '',
password: ''
},
// 表单验证，需要在 el-form-item 元素中增加 prop 属性
rules: {
user: [
{required: true, message: '账号不可为空', trigger: 'blur'}
],
password: [
{required: true, message: '密码不可为空', trigger: 'blur'}
]
},
}
},
methods: {
onSubmit() {
// console.log(this.form)
// 为表单绑定验证功能
this.$refs.registerForm.validate((valid) => {
if (valid) {
this.logining=true
let _this = this
if (_this.logining == true) {
Axios.get("http://localhost:8181/admin/register",{params:this.registerform}).then(function (res) {
_this.logining=false
// console.log(res.data.code)
if (res.data.code == -1) {
_this.$message.error('用户名已存在');
}
if (res.data.code == 0) {
_this.$message({
message: '恭喜你，注册成功',
type: 'success'
});
localStorage.setItem('login',JSON.stringify(res.data.data));
_this.$router.push({path:'/'})
}
})
}
}
// 使用 vue-router 路由到指定页面，该方式称之为编程式导航
// this.$router.push("/main");
// } else {
// // return false;
// }
});
}
}
}
</script>
<style>
.register-title {
text-align: center;
margin: 0 auto 40px auto;
color: #303133;
}
</style>
首页界面
Main.vue
<template >
<el-container class="homecontainer">
<el-header >
<div class="head" >
<div class="div1" >XXXXX管理系统</div>
<div class="div2" >
<el-dropdown >
<span class="el-dropdown-link" >
下拉菜单<i class="el-icon-arrow-down el-icon--right" style="margin-right: 15px" ></i>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item>个人信息</el-dropdown-item>
<el-dropdown-item>修改密码</el-dropdown-item>
<el-dropdown-item>退出登录</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
</div>
</el-header>
<el-container>
<el-aside width="200px">
<el-menu router
default-active="2"
class="el-menu-vertical-demo"
@open="handleOpen"
@close="handleClose">
<el-submenu index="1">
<template slot="title"><i class="el-icon-platform-eleme"></i><span>导航一</span></template>
<el-menu-item index="/manage">商品管理</el-menu-item>
<el-menu-item index="/add">添加商品</el-menu-item>
</el-submenu>
<el-menu-item index="2">
<i class="el-icon-eleme"></i>
<span slot="title">导航二</span>
</el-menu-item>
</el-menu>
</el-aside>
<el-container>
<el-main height="300px" >
<el-breadcrumb separator-class="el-icon-arrow-right">
<el-breadcrumb-item :to="{ path: '/main' }">首页</el-breadcrumb-item>
<el-breadcrumb-item v-text="this.$router.currentRoute.name"></el-breadcrumb-item>
</el-breadcrumb>
<router-view></router-view>
</el-main>
<el-footer height="60px">2022-Spring Boot-Vue-Element-ui-Mabtis-Plus</el-footer>
</el-container>
</el-container>
</el-container>
</template>
<script>
export default {
methods: {
handleClick(row) {
console.log(row);
},
handleOpen() {
},
handleClose() {
}
},
data() {
return {
}
}
}
</script>
<style scoped>
.homecontainer{
height: 763px;
width: 100%;
}
.head{
display: flex ;
flex-direction: row;
}
.div1{
align-items: center;
margin-top: 25px;
}
.div2{
margin-left: 1270px;
margin-top: 30px;
float: right;
font-size: 12px;
}
.el-header{
background-color: #1b7cfbbb;
color: #333;
text-align: center;
line-height: 10px;
}
.el-footer {
background-color: #B3C0D1;
color: #333;
text-align: center;
line-height: 60px;
}
.el-aside {
background-color: #D3DCE6;
color: #333;
text-align: center;
line-height: 200px;
}
.el-main {
background-color: #E9EEF3;
color: #333;
text-align: center;
line-height: 10px;
}
.el-dropdown-link {
cursor: pointer;
color: #010e1b;
}
.el-icon-arrow-down {
font-size: 12px;
}
</style>
路由设置
index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import Main from "@/views/Main"
import Manage from '@/views/Manage'
import Add from '@/views/Add'
import LogReg from '@/views/LogAndReg/LogReg'
Vue.use(VueRouter)
const routes = [
{
path: '/',
name: '入口',
component: LogReg
},
{
path: '/main',
name: '首页',
component: Main,
// redirect:'/manage',
children:[
{
path: '/manage',
name: '商品管理',
component: Manage
},
{
path: '/add',
name: '添加商品',
component: Add
},
]
},
]
const router = new VueRouter({
routes
})
export default router
登录界面
注册页面
vue实现
Login.vue
<template>
<div>
<el-form ref="loginForm" :model="loginform" :rules="rules" label-width="80px" class="login-box" >
<h3 class="login-title">欢迎登录</h3>
<el-form-item label="账号" prop="user">
<el-input type="text" placeholder="请输入账号" v-model="loginform.user"/>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input type="password" placeholder="请输入密码" v-model="loginform.password"/>
</el-form-item>
<div style="text-align: center;">
<router-link :to="{path: '/register'}">还没有账号？去注册</router-link>
<el-form-item>
<el-button type="primary" :loading="logining" v-on:click="onSubmit()">登录</el-button>
</el-form-item>
</div>
</el-form>
</div>
</template>
<script>
import Axios from 'axios';
export default{
components: {
},
name: "Login",
data() {
return {
activeName: 'first',
logining:false,
loginform: {
user: '',
password: ''
},
// 表单验证，需要在 el-form-item 元素中增加 prop 属性
rules: {
user: [
{required: true, message: '账号不可为空', trigger: 'blur'}
],
password: [
{required: true, message: '密码不可为空', trigger: 'blur'}
]
},
// 对话框显示和隐藏
// dialogVisible: false
}
},
methods: {
onSubmit() {
// console.log(this.form)
// 为表单绑定验证功能
this.$refs.loginForm.validate((valid) => {
if (valid) {
this.logining=true
let _this = this
if (_this.logining == true) {
Axios.get("http://localhost:8181/admin/login",{params:this.loginform}).then(function (res) {
_this.logining=false
// console.log(res.data.code)
if (res.data.code == -1) {
_this.$message.error('用户名不存在');
}
if (res.data.code == -2) {
_this.$message.error('密码错误');
}
if (res.data.code == 0) {
_this.$message({
message: '恭喜你，登录成功',
type: 'success'
});
localStorage.setItem('main',JSON.stringify(res.data.data));
_this.$router.replace({path:'/main'})
}
})
}
}
// 使用 vue-router 路由到指定页面，该方式称之为编程式导航
// this.$router.push("/main");
// } else {
// // return false;
// }
});
}
}
}
</script>
<style scoped>
.login-box {
border: 1px solid #DCDFE6;
width: 350px;
margin: 180px auto;
padding: 35px 35px 15px 35px;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
box-shadow: 0 0 25px #909399;
}
.login-title {
text-align: center;
margin: 0 auto 40px auto;
color: #303133;
}
</style>
register.vue
<template>
<div>
<el-form ref="registerForm" :model="registerform" :rules="rules" label-width="80px" class="register-box">
<h3 class="register-title">注册用户</h3>
<el-form-item label="账号" prop="user">
<el-input type="text" placeholder="请输入账号" v-model="registerform.user"/>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input type="password" placeholder="请输入密码" v-model="registerform.password"/>
</el-form-item>
<el-form-item>
<el-button type="primary" :loading="logining" v-on:click="onSubmit()">注册</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
import Axios from 'axios';
export default{
data() {
return {
logining:false,
registerform: {
user: '',
password: ''
},
// 表单验证，需要在 el-form-item 元素中增加 prop 属性
rules: {
user: [
{required: true, message: '账号不可为空', trigger: 'blur'}
],
password: [
{required: true, message: '密码不可为空', trigger: 'blur'}
]
},
}
},
methods: {
onSubmit() {
// console.log(this.form)
// 为表单绑定验证功能
this.$refs.registerForm.validate((valid) => {
if (valid) {
this.logining=true
let _this = this
if (_this.logining == true) {
Axios.get("http://localhost:8181/admin/register",{params:this.registerform}).then(function (res) {
_this.logining=false
// console.log(res.data.code)
if (res.data.code == -1) {
_this.$message.error('用户名已存在');
}
if (res.data.code == 0) {
_this.$message({
message: '恭喜你，注册成功',
type: 'success'
});
localStorage.setItem('login',JSON.stringify(res.data.data));
_this.$router.push({path:'/'})
}
})
}
}
// 使用 vue-router 路由到指定页面，该方式称之为编程式导航
// this.$router.push("/main");
// } else {
// // return false;
// }
});
}
}
}
</script>
<style>
.register-box {
border: 1px solid #DCDFE6;
width: 350px;
margin: 180px auto;
padding: 35px 35px 15px 35px;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
box-shadow: 0 0 25px #909399;
}
.register-title {
text-align: center;
margin: 0 auto 40px auto;
color: #303133;
}
</style>
路由设置
index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import HomeView from '../views/HomeView.vue'
Vue.use(VueRouter)
const routes = [
{
path: '/login',
name: '登录',
component: ()=>import('../views/Login/LoginView.vue')
},
{
path: '/register',
name: '注册',
component: ()=>import('../views/Register/registerView.vue')
},
{
path: '/about',
name: 'about',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
}
]
const router = new VueRouter({
routes
})
export default router
我正在使用i18n从头开始构建一个多语言网络应用程序，虽然我自己可以处理一大堆yml文件，但我说的语言(非常)有限，最终我想寻求外部帮助帮助。我想知道这里是否有人在使用UI插件/gem(与django上的django-rosetta不同)来处理多个翻译器，其中一些翻译器不愿意或无法处理存储库中的100多个文件，处理语言数据。谢谢&问候，安德拉斯(如果您已经在rubyonrails-talk上遇到了这个问题，我们深表歉意) 最佳答案 有一个rails3branchofthetolkgem在github上。您可以通过在Gemfi
我正在使用puppet为ruby程序提供一组常量。我需要提供一组主机名，我的程序将对其进行迭代。在我之前使用的bash脚本中，我只是将它作为一个puppet变量hosts=>"host1,host2"我将其提供给bash脚本作为HOSTS=显然这对ruby不太适用——我需要它的格式hosts=["host1","host2"]自从phosts和putsmy_array.inspect提供输出["host1","host2"]我希望使用其中之一。不幸的是，我终其一生都无法弄清楚如何让它发挥作用。我尝试了以下各项:我发现某处他们指出我需要在函数调用前放置“function_”……这
我安装了ruby版本管理器，并将RVM安装的ruby实现设置为默认值，这样'哪个ruby'显示'~/.rvm/ruby-1.8.6-p383/bin/ruby'但是当我在emacs中打开inf-ruby缓冲区时，它使用安装在/usr/bin中的ruby。有没有办法让emacs像shell一样尊重ruby的路径？谢谢! 最佳答案 我创建了一个emacs扩展来将rvm集成到emacs中。如果您有兴趣，可以在这里获取:http://github.com/senny/rvm.el
按照目前的情况，这个问题不适合我们的问答形式。我们希望答案得到事实、引用或专业知识的支持，但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开，visitthehelpcenter指导。关闭10年前。问题1)我想知道rubyonrails是否有功能类似于primefaces的gem。我问的原因是如果您使用primefaces(http://www.primefaces.org/showcase-labs/ui/home.jsf)，开发人员无需担心javascript或jquery的东西。据我所知，JSF是一个规范，基于规范的各种可用实现，prim
是否有简单的方法来更改默认ISO格式(yyyy-mm-dd)的ActiveAdmin日期过滤器显示格式？ 最佳答案 您可以像这样为日期选择器提供额外的选项，而不是覆盖js:=f.input:my_date,as::datepicker,datepicker_options:{dateFormat:"mm/dd/yy"} 关于ruby-on-rails-事件管理员日期过滤器日期格式自定义，我们在StackOverflow上找到一个类似的问题： https://s
电脑0x0000001A蓝屏错误怎么U盘重装系统教学分享。有用户电脑开机之后遇到了系统蓝屏的情况。系统蓝屏问题很多时候都是系统bug，只有通过重装系统来进行解决。那么蓝屏问题如何通过U盘重装新系统来解决呢？来看看以下的详细操作方法教学吧。 准备工作： 1、U盘一个（尽量使用8G以上的U盘）。 2、一台正常联网可使用的电脑。 3、ghost或ISO系统镜像文件（Win10系统下载_Win10专业版_windows10正式版下载-系统之家）。 4、在本页面下载U盘启动盘制作工具：系统之家U盘启动工具。 U盘启动盘制作步骤： 注意：制作期间，U盘会被格式化，因此U盘中的重要文件请注
在应用开发中，有时候我们需要获取系统的设备信息，用于数据上报和行为分析。那在鸿蒙系统中，我们应该怎么去获取设备的系统信息呢，比如说获取手机的系统版本号、手机的制造商、手机型号等数据。1、获取方式这里分为两种情况，一种是设备信息的获取，一种是系统信息的获取。1.1、获取设备信息获取设备信息，鸿蒙的SDK包为我们提供了DeviceInfo类，通过该类的一些静态方法，可以获取设备信息，DeviceInfo类的包路径为：ohos.system.DeviceInfo.具体的方法如下：ModifierandTypeMethodDescriptionstatic StringgetAbiList()Obt
我正在使用Mandrill的RubyAPIGem并使用以下简单的测试模板:testastic按照Heroku指南中的示例，我有以下Ruby代码:require'mandrill'm=Mandrill::API.newrendered=m.templates.render'test-template',[{:header=>'someheadertext',:main_section=>'Themaincontentblock',:footer=>'asdf'}]mail(:to=>"JaysonLane",:subject=>"TestEmail")do|format|format.h
项目介绍随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱小学生兴趣延时班预约小程序的设计与开发被用户普遍使用,为方便用户能够可以随时进行小学生兴趣延时班预约小程序的设计与开发的数据信息管理,特开发了小程序的设计与开发的管理系统。小学生兴趣延时班预约小程序的设计与开发的开发利用现有的成熟技术参考,以源代码为模板,分析功能调整与小学生兴趣延时班预约小程序的设计与开发的实际需求相结合,讨论了小学生兴趣延时班预约小程序的设计与开发的使用。开发环境开发说明：前端使用微信微信小程序开发工具：后端使用ssm：VU
需求：要创建虚拟机，就需要给他提供一个虚拟的磁盘，我们就在/opt目录下创建一个10G大小的raw格式的虚拟磁盘CentOS-7-x86_64.raw命令格式：qemu-imgcreate-f磁盘格式磁盘名称磁盘大小qemu-imgcreate-f磁盘格式-o?1.创建磁盘qemu-imgcreate-fraw/opt/CentOS-7-x86_64.raw10G执行效果#ls/opt/CentOS-7-x86_64.raw2.安装虚拟机使用virt-install命令，基于我们提供的系统镜像和虚拟磁盘来创建一个虚拟机，另外在创建虚拟机之前，提前打开vnc客户端，在创建虚拟机的时候，通过vnc