Vue.js、node.js基本操作

已于 2022-04-12 22:11:46 修改
阅读量999 收藏
点赞数
分类专栏： Vue 文章标签： vue.js vue
于 2022-04-06 16:19:21 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_53088095/article/details/123993049
版权

vue界面登录

Login.vue代码如下，去访问数据库

<!-- 定义模版对象 -->
<template>
    <div class="login_container">
      <div class="login_box">
        <!-- 头像区域-->
        <div class="avatar_box">
          <img src="../assets/logo.png" alt="VUE图片" />
        </div>

        <!-- 登陆表单区域
              ref代表当前表单引用对象
             :model 是表格中封装的对象
        -->
        <el-form ref="loginFormRef" label-width="0" class="login_form" :model="loginForm" :rules="rules" >
          <el-form-item prop="username">
            <el-input  prefix-icon="iconfont iconuser" v-model="loginForm.username"></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input  prefix-icon="iconfont iconsuo" type="password" v-model="loginForm.password"></el-input>
          </el-form-item>
          <el-form-item class="btns">
             <el-button type="primary" @click="login">登录</el-button>
              <el-button type="info" @click="resetBtn">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
</template>

<!-- 定义JS变量 -->
<script>
export default {
  data(){
    return {
      loginForm: {
        username: '',
        password: ''
      },
      //定义表单的验证规则
      rules: {
         //定义校验用户名
         username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 3, max:30, message: '长度在 3 到 30 个字符', trigger: 'blur' }
         ],
         //定义校验密码
         password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 3, max:30, message: '长度在 3 到 30 个字符', trigger: 'blur' }
         ]
      }
    }
  },
  methods: {
    resetBtn(){
      //this对象代表当前组件对象
      //console.log(this)
      //实现数据重置
      this.$refs.loginFormRef.resetFields()
    },
    login(){
      //获取表单对象之后进行数据校验
      //valid 表示校验的结果 true表示通过  false表示失败
      this.$refs.loginFormRef.validate(async valid => {
         //如果没有完成校验则直接返回
         if(!valid) return

         //如果校验成功,则发起ajax请求
        const {data: result} = await this.$http.post('/user/login',this.loginForm)//JSON.stringify(this.loginForm)
        if(result.status !== 200) return this.$message.error("用户登录失败")
        this.$message.success("用户登陆成功")

        //获取用户token信息
        let token = result.data
        window.sessionStorage.setItem("token",token)

        //用户登录成功之后,跳转到home页面
        this.$router.push("/home")
      })
    }
  }
}
</script>

<!-- 防止组件冲突 -->
<style lang="less" scoped>
.login_container{
  background-color: #2b4b6b;
  height: 100%;
}

.login_box {
  width: 450px;
  height: 300px;
  background-color: #FFFFFF;
  /* 设定圆弧角*/
  border-radius: 10px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);

  .avatar_box {
    height: 130px;
    width: 130px;
    border: 1px solid #EEEEEE;
    border-radius: 50%;
    padding: 10px;
    box-shadow: 0 0 10px #DDDDDD; /* 添加阴影*/
    position: absolute;           /* 绝对定位*/
    left: 50%;                    /* 距离左侧50%*/
    transform: translate(-50%,-50%);   /*回调50%*/
    background-color: #FFFFFF;
    img {
      height: 100%;
      width: 100%;
      border-radius: 50%;
      background-color: #EEEEEE;
    }
  }

  .btns {
    display: flex;
    justify-content: flex-end;

  }

  .login_form {
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
  }
}
</style>
路由导航守卫实现
//配置路由对象
const router = new VueRouter({
  routes
})

/* 配置路由导航守卫 控制权限
  1.to 要跳转的网址
  2.from 请求从哪里来
  3.next 回调函数  放行/跳转
 */
router.beforeEach((to,from,next) => {
  //1.如果用户访问 /login  请求应该放行 终止程序
  if(to.path === '/login') {
    return next()
  }

  //2.如果用户访问不是login 则需要校验是否登录 检查是否有token
  let token = window.sessionStorage.getItem('token')
  if(token !== null && token.length > 0){
    return next()
  }else {
    //没有token 应该跳转到登录页面 "/login"
    return next("/login")
  }
})

gitee

使用Axios的Get传单一值

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>使用Axios传单一值</title>
    <script src="vue.js"></script>
    <script src="axios.min.js"></script>
    
</head>

<body>
    <div id="app">
       <input type="text" v-model="uid" placeholder="请输入用户编号">
       <button @click="getUserById()">查询</button><br>
        电话：{{user.telephone}}<br>
        密码：{{user.password}}
    </div>
</body>

</html>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            url: "http://localhost:8080/select",
            user:{},
            uid:""
        },
        methods: {
            //获取用户信息
            getUserById() {
                axios.get(this.url+"?uid="+this.uid).then(res=>{
                   this.user=res.data.data.user;
                })
            }
        },
    })
</script>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>使用Axios传单一值</title>
    <script src="vue.js"></script>
    <script src="axios.min.js"></script>
    
</head>

<body>
    <div id="app">
       <input type="text" v-model="uid" placeholder="请输入用户编号">
       <button @click="getUserById()">查询</button><br>
        电话：{{user.telephone}}<br>
        密码：{{user.password}}
    </div>


</body>

</html>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            url: "http://localhost:8080/select",
            user:{},
            uid:""
        },
        methods: {
            //获取用户信息
            getUserById() {
                axios.get(this.url,{
                    params:{
                        uid:this.uid
                    }
                }).then(res=>{
                   this.user=res.data.data.user;
                })
            }
        },
    })
</script>

Axios使用GET数据Restful风格

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>使用Axios传值Restful风格</title>
    <script src="vue.js"></script>
    <script src="axios.min.js"></script>
    
</head>

<body>
    <div id="app">
       <input type="text" v-model="uid" placeholder="请输入用户编号">
       <button @click="getUserById()">查询</button><br>
        电话：{{user.telephone}}<br>
        密码：{{user.password}}
    </div>


</body>

</html>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            uid:"",
            // url:`http://localhost:8080/users/${this.uid}`,
            user:{}
        },
        methods: {
            //获取用户信息
            getUserById() {
                var url=`http://localhost:8080/users/${this.uid}`;
               axios.get(url).then(res=>{
                   this.user=res.data.data.user;
               })
            }
        },
    })
</script>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>使用Axios传值Restful风格</title>
    <script src="vue.js"></script>
    <script src="axios.min.js"></script>
    
</head>

<body>
    <div id="app">
       <input type="text" v-model="uid" placeholder="请输入用户编号">
       <button @click="getUserById()">查询</button><br>
        电话：{{user.telephone}}<br>
        密码：{{user.password}}
    </div>


</body>

</html>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            uid:"",
            url:`http://localhost:8080/users`,
            user:{}
        },
        methods: {
            //获取用户信息
            getUserById() {
               axios({
                   url:this.url+"/"+this.uid,
                   method:"Get"
               }).then(res=>{
                   this.user=res.data.data.user;
               })
                   
            }
        },
    })
</script>

使用Axios的Get标准形式

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>使用Axios传单一值</title>
    <script src="vue.js"></script>
    <script src="axios.min.js"></script>
    
</head>

<body>
    <div id="app">
       <input type="text" v-model="uid" placeholder="请输入用户编号">
       <button @click="getUserById()">查询</button><br>
        电话：{{user.telephone}}<br>
        密码：{{user.password}}
    </div>


</body>

</html>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            url: "http://localhost:8080/select",
            user:{},
            uid:""
        },
        methods: {
            //获取用户信息
            getUserById() {
               axios({
                   url:this.url,
                   method:"Get",
                   params:{
                       uid:this.uid
                   }
               }).then(res=>{
                  this.user=res.data.data.user;
               })
            }
        },
    })
</script>

使用Axios的Get完成后端數據集合顯示

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>使用Axios完成后端交互</title>
    <script src="vue.js"></script>
    <script src="axios.min.js"></script>
    <style>
        td{
            text-align: center;
        }
    </style>
</head>

<body>
    <div id="app">
        <button @click="getUserList()">获取所有用户信息</button>
        <div>
            <table border="1px" cellpadding="3px" cellspacing="2px">
                <tr>
                    <td>用户id</td>
                    <td>电话</td>
                    <td>密码</td>
                    <td>姓名</td>
                    <td>生日</td>
                    <td>创建日期</td>
                    <td>头像</td>
                    <td>是否可用</td>
                    <td>部门名称</td>
                </tr>
                <tr v-for="user in users">
                    <td>{{user.uid}}</td>
                    <td>{{user.telephone}}</td>
                    <td>{{user.password}}</td>
                    <td>{{user.realname}}</td>
                    <td>{{user.birthday}}</td>
                    <td>{{user.createdate}}</td>
                    <td>{{user.headimg}}</td>
                    <td>{{user.available}}</td>
                    <td>{{user.dept.deptname}}</td>
                </tr>
            </table>
        </div>
    </div>


</body>

</html>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            url: "http://localhost:8080/users",
            users:[]
        },
        methods: {
            //获取所有用户信息
            getUserList() {
                axios.get(this.url).then(res => {
                    console.log(res);
                   this.users=res.data.data.users;
                }).catch(res => {
                    Promise.reject();
                })
            }
        },
    })
</script>

Axios使用Post新增数据Restful风格

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Axios使用Post新增数据Restful风格</title>
    <script src="vue.js"></script>
    <script src="axios.min.js"></script>
</head>

<body>
    <div id="app">
        <input type="text" placeholder="请输入部门名称" v-model="dept.deptname">
        <input type="text" placeholder="请输入部门人数" v-model="dept.deptnum">
        <input type="text" placeholder="请输入部门描述" v-model="dept.deptdesc">
        <button @click="addDept">新增部门信息</button>
    </div>
</body>

</html>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            dept: {
                deptid: "",
                deptname: "",
                deptnum: "",
                deptdesc: ""
            },
           url:"http://localhost:8080/depts"
        },
        methods: {
            addDept(){
                axios({
                    url:this.url,
                    method:"POST",
                    data:this.dept
                }).then(res=>{
                    console.log(res);
                })
            }

        },
    })
</script>

Axios使用Delete删除数据Restful风格

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Axios使用Delete删除数据Restful风格</title>
    <script src="vue.js"></script>
    <script src="axios.min.js"></script>
</head>

<body>
    <div id="app">
        <input type="text" placeholder="请输入部门编号" v-model="deptid">
        <button @click="deleteDept">删除部门信息</button>
    </div>
</body>

</html>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            url:"http://localhost:8080/depts",
            deptid:""
        },
        methods: {
            deleteDept() {
                axios({
                    url: this.url,
                    method:"DELETE",
                    params:{
                        deptid:this.deptid
                    }
                }).then(res => {
                    console.log(res);
                })
            }
        }
    });
</script>
josion.
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue.js项目实战,vue.js项目实战pdf下载,JavaScript
09-10
vue实战开发.快速上手.好不容易找到电子版.非PDF版
Vue基础操作（新手看这章就对了）
最新发布
zky__sch的博客
08-02 227
Vue 里面data属性之所以不能写成对象的格式，是因为对象是对地址的引用，而不是独立存在的。如果一个.vue 文件有多个子组件共同接收一个变量的话，改变其中一个子组件内此变量的值，会影响其他组件的这个变量的值。如果写成函数的话，那么他们有一个作用域的概念在里面，相互隔阂，不受影响。在vue中v-xxx就是vue的指令，指令就是以数据去驱动DOM行为的,简化DOM操作。冒泡发生的情景：子元素和父元素绑定了相同的事件，然后点击了子元素，父元素也触发了该事件。用于储存数据，数据供el指定的容器使用。
VUE 超级详细教程
热门推荐
weixin_42371679的博客
06-06 5万+
一、安装 二、基础练习 1）引入vue.js 解释： 注意：被挂载的div要放在vue的上面，否则vue管不到 2）v-for 3）做一个计数器(v-on:click) 方法一：直接在标签里实现 <div id="app"> <h2>当前计数: {{count}}</h2> <button v-on:click="count++">+</button> <button v-on:cl
Vue基础教程，使用方法
月苏西的博客
01-13 1万+
一.引入vue.js 二.创建一个vue实例 在实例化vue的时候，有两种挂载方式 1.最常用的做法就是直接在实例化的时候利用el:"#app"来挂载元素 el：设置被操作的元素，表示vue要控制的区域，值为css选择器 data： 类型是对象 作用存放要用到的数据，数据为响应式的 三.将数据绑定到页面元素 {{lcy}} 四.指令 什么是指令？ ...
VUE的基本使用。
qq_61576523的博客
04-06 8553
要想使用vue，你要先安装一个名字叫：Vscode这个软件，这个软件的安装，在这就不说了。在这里直接进行演示。 1，首先你要先创建一个文件夹， 把vue的jar包和jquery的jar包都放进去，然后再在里面创建一个文件，名字可以自定义，一开始创建好是一个空白，你输入！号后点击回车后会呈现出这个界面。 2.写导入jar包的代码。 我在这里有新建了一个文件夹js放，把这两个jar包都放到了js里面所以他的导入jar包的代码是这样的： <script src="js/vue.js" ty
常用的vue操作
xiao-啸
07-17 173
过滤器/生命周期的钩子函数/模板语法{{}}/指令系统/Vue中的常用属性/Vue常用方法/Vue的过滤器/Vue的组件/组件的传值/Vue的全家桶( kfc ) vue+vue-router+vuex/使用vue-router/命名路由/动态路由匹配/编程式导航vs声明式导航 过滤器 ​ 1.局部过滤器 在当前组件内部使用过滤器 ​ 给某些数据 添油加醋 // 声明 filters:{ ...
基于Vue.js和Node.js音乐 播放器的设计与实现
04-18
基于Vue.js和Node.js音乐 播放器的设计与实现
Vue.js和node.js安装包(windows下64位)
01-03
vue.js和vue.min.js和node.js的安装配置包（详细安装说明请见我的另一个博文node.js和vue.js安装配置）
vue.js_node.js_mysql在线聊天室源码.zip
11-07
在线聊天室源码，采用技术栈：vue.js+Element UI+node.js+socket.io+mysql，有兴趣的自行下载研究。
基于node.js与vue.js的校园考试系统源码.zip
05-18
基于node.js与vue.js的校园考试系统源码
vue操作简介
01-04
vue的基础简介，方便了解vue技术与其他技术的区别。里面介绍了vue与其他技术
VUE的使用教程
小翁的博客
07-19 1518
vue界面操作
qq_40041046的博客
09-19 518
![在这里插入图片描述]( ) &lt;div id="sd"&gt;     &lt;input type="hidden" id="ids"  value="{$ids}"  &gt;     &lt;div class="layui-form-item"&gt;         &lt;label class="layui-form
VUE基础操作
WC949464367的博客
03-23 769
哎前端框架也是要会一点，不然没法做项目 axios传参与地址，与后端方法呼应 axios.get与控制层的GetMapping(value=地址）映射 key为后端方法的参数 axios.post与控制层PostMapping映射，同上，格式稍有出入 springboot的RESTFUL与前端有一一对应的写法，详情见以下代码 control层 package com.itheima.controller; import com.baomidou.mybatisplus.core.m
Vue的基本操作
赵小准的博客
05-25 695
一、使用VUE 1、引入vue.js文件 //下载后导入 <script src=vue.js></script> 2、通过下面的代码展示用，创建一个Vue的实例，然后通过应用的id嵌入根元素，将数据放入一个对象data中，并且将表达式传入div中{{msg}}（一定注意必须是双大括号） <div id="app"> {{ msg}} </div&g...
vuejs 基本操作
jessionlin的博客
03-06 2889
一、安装1.在本地创建一个HTML文件，然后直接引用vue.js文件 <script src="https://unpkg.com/vue/dist/vue.js"></script> 2.在node环境下可以直接用 npm install vue-cli 但是这种方式并不推荐使用，尤其是多nodejs构建工具不够了解的同学二、渲染1.声明式渲染 Vue.js简单地说就是创建一个简洁的模
vue 相关知识
weixin_41883384的博客
06-06 408
一.安装1.使用nodejs安装vue安装完成node，node有自带的npm，可以直接在cmd中，找到nodeJs安装的路径下，进行命令行全局安装vue-cli。（npminstall--globalvue-cli）2.检查是否安装成功3.创建一个空的文件4.如下选择，生成vue-test文件夹例：生成vue-test目录结构如下图：5.安装node_modules模块，进入vue-te...
前端Vue之vue的基本操作
weixin_30877755的博客
03-09 159
1.1 vue.js的快速入门使用 vue.js是目前前端web开发最流行的工具库之一，由尤雨溪在2014年2月发布的。 另外几个常见的工具库：react.js /angular.js 官方网站： 中文：https://cn.vuejs.org/ 英文：https://vuejs.org/ 官方文档：https://cn.vuejs.org/v2/guide/ 1.2 vue.j...
vue 基础操作
weixin_44091775的博客
12-13 75
vue 1.v-if , v-show 控制标签的显示与隐藏 2.el:"#app" 选择哪个标签 3.v-for 循环 v-for=“item,index in lst” v-for 最后面一定要加上 :key"index" 4.v-bind 缩写 : 用来绑定属性值 5.v-on 缩写@事件 用来绑定事件 6.v-once 只赋值一次 7.v-text 浏览器原样输出 {{}} v-html ...
nw.js+vue.js 在vue.js如何使用node api
07-22
在Vue.js中使用Node.js的API需要注意一些事项。由于Vue.js是在浏览器环境中运行的，而Node.js的API主要针对服务器端开发，所以直接在Vue.js中使用Node.js的API是不可行的。 如果你想在Vue.js中调用Node.js的API，一...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值