发布时间:2023-09-22 19:30
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档
提示:这里可以添加本文要记录的大概内容:
例如:随着人工智能的不断发展,机器学习这门技术也越来越重要,很多人都开启了学习机器学习,本文就介绍了机器学习的基础内容。
提示:以下是本篇文章正文内容,下面案例可供参考
vue是一个用于创建用户界面的开源JavaScript框架,也是一个创建单页应用的Web应用框架
代码如下(示例):
// 跨域文件
module.exports = {
devServer:{
proxy:('https://major.usemock.com/')
}
}
代码如下(示例):
// 封装
import Axios from "axios";
// 获取数据
export function get(url,params){
return Axios.get(url,params)
}
// 登入注册
export function post(url,params){
return Axios.post(url,params)
}
// 删除
export function del(url,params){
return Axios.delete(url,params)
}
// 修改
export function put(url,params){
return Axios.put(url,params)
}
代码如下(示例):
<template>
<h3>注册页面</h3>
<!-- 创建注册 的框架 双向绑定-->
<p>账号:<input type="text" v-model="zhang"></p>
<p>密码:<input type="password" v-model="mima"></p>
<button @click="zhu">注册</button>
</template>
<script>
import { mapState } from 'vuex'
import {post} from '../utils/reqest'
export default {
data(){
return{
zhang:'',
mima:'',
}
},
methods:{
zhu(){
// 请求接口,点击注册转换到登入页面!!
post('/register')
.then((see)=>{
console.log(see)
// 直接引用vuex里方法
this.$store.commit('zhang2',this.zhang)
this.$store.commit('mima2',this.mima)
if(this.zhang1 == '' || this.mima1 == ''){
alert('账号或密码为空!!!')
}else{
alert('注册成功!!!')
this.$router.push('/about')
}
}).catch((err)=>{
console.log(err)
})
}
},
// 映射的方式传递vuex数据
computed:{
...mapState(['zhang1','mima1'])
}
}
</script>
代码如下(示例):
import { createStore } from 'vuex'
export default createStore({
state: {
zhang1:'',
mima1:''
},
getters: {
},
mutations: {
zhang2(state,da){
state.zhang1 = da
},
mima2(state,da1){
state.mima1 = da1
}
},
actions: {
},
modules: {
}
})
该处使用的url网络请求的数据。
代码如下(示例):
<template>
<h3>登入页面</h3>
<!-- 登入页面框架 双向绑定 -->
<p>账号:<input type="text" v-model="zhangd"></p>
<p>密码:<input type="password" v-model="mimad"></p>
<button @click="deng">登入</button>
</template>
<script>
import { mapState } from 'vuex'
import { post } from '@/utils/reqest'
export default {
data(){
return{
zhangd:'',
mimad:'',
}
},
// 当未注册时自动跳转到注册页面
mounted(){
if(this.zhang1 == '' || this.mima1 == ''){
alert('账号或密码不可为空!!')
this.$router.push('/')
}
},
methods:{
// 请求接口,点击登入进入首页
deng(){
post('/login')
.then((see)=>{
console.log(see)
if(this.zhangd == '' || this.mimad == ''){
alert('账号或密码不可为空!!')
}else if(this.zhangd == this.zhang1 && this.mimad == this.mima1){
alert('登入成功!!!')
this.$router.push('/shou')
}else{
alert('账号或密码错误!!!')
}
}).catch((err)=>{
console.log(err)
})
}
},
// 映射的方式传递vuex数据
computed:{
...mapState(['zhang1','mima1'])
}
}
</script>
代码如下(示例):
<template>
<h3>首页</h3>
<!-- 获取数据创建表格 -->
<table border="1px" align="center" width="600px">
<tr>
<td>编号</td>
<td>专业</td>
<td>人数</td>
<td>周期</td>
<td>操作</td>
</tr>
<tr v-for="(x,i) in shu" :key="i">
<td>{{x.id}}</td>
<td>{{x.name}}</td>
<td>{{x.count}}</td>
<td>{{x.period}}</td>
<td>
<button @click="shan(i)">删除</button>
<button @click="xiu(i)">修改</button>
</td>
</tr>
</table>
<p>添加</p>
<p>专业:<input type="text" v-model="id2"></p>
<p>人数:<input type="text" v-model="id3"></p>
<p>周期:<input type="text" v-model="id4"></p>
<button @click="tian">确认添加</button>
<p>修改</p>
<p>编号:<input type="text" v-model="wad.id"></p>
<p>专业:<input type="text" v-model="wad.name"></p>
<p>人数:<input type="text" v-model="wad.count"></p>
<p>周期:<input type="text" v-model="wad.period"></p>
<button @click="gai">确认修改</button>
</template>
<script>
import { mapState } from 'vuex'
import { del, get, post, put } from '@/utils/reqest'
export default {
data(){
return{
shu:[],
id1:6,
id2:'',
id3:'',
id4:'',
wad:{}
}
},
mounted(){
// 挂载请求数据,运行时获取接口的数据
get('/getall')
.then((see)=>{
console.log(see)
this.shu = see.data
}).catch((err)=>{
console.log(err)
})
if(this.zhang1 == '' || this.mima1 == ''){
alert('账号或密码不可为空!!')
this.$router.push('/about')
}
},
methods:{
// 请求删除接口,删除数据
shan(i){
del('/delete')
.then((see)=>{
console.log(see)
this.shu.splice(i,1)
}).catch((err)=>{
console.log(err)
})
},
// 修改数据
xiu(i){
this.wad = this.shu[i]
},
// 求情接口确认修改
gai(){
put('/update')
.then((see)=>{
console.log(see)
alert('修改成功!!!')
}).catch((err)=>{
console.log(err)
})
},
// 求情添加接口,添加数据
tian(){
var obj = {id:this.id1,name:this.id2,count:this.id3,period:this.id4}
post('/add',obj)
.then((see)=>{
console.log(see)
this.shu.push(obj)
this.id1++
}).catch((err)=>{
console.log(err)
})
}
},
// 映射的方式传递vuex数据
computed:{
...mapState(['zhang1','mima1'])
}
}
</script>
<style>
</style>
提示:vue简单注册、登入、数据获取。
例如:以上就是今天要讲的内容,本文仅仅简单介绍了注册、登入、数据获取的使用,而vue中提供了大量能使我们快速便捷地写作网页,运行速度快,简单易学。