Vue.js、node.js基本操作

已于 2022-04-12 22:11:46 修改
阅读量1k 收藏
点赞数
分类专栏： 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.
关注
专栏目录
vue操作简介
01-04
vue的基础简介，方便了解vue技术与其他技术的区别。里面介绍了vue与其他技术
vue界面操作
qq_40041046的博客
09-19 560
![在这里插入图片描述]( ) &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
next.js与 node.js
最新发布
面向命运编程
09-17 1794
Next.js 是一个基于 React 的前端框架，旨在通过提供服务端渲染（SSR）、静态生成（SSG）和客户端渲染（CSR）等功能，帮助开发者构建现代的、性能优异的 Web 应用。它由 Vercel 开发，并成为了构建 React 应用的最流行框架之一。服务器端渲染（SSR, Server-Side Rendering）：示例： 静态生成（SSG, Static Site Generation）：示例： 如果是动态路由，还需要 ： 增量静态生成（ISR, Incremental Static Re
Vue的基本操作
赵小准的博客
05-25 712
一、使用VUE 1、引入vue.js文件 //下载后导入 <script src=vue.js></script> 2、通过下面的代码展示用，创建一个Vue的实例，然后通过应用的id嵌入根元素，将数据放入一个对象data中，并且将表达式传入div中{{msg}}（一定注意必须是双大括号） <div id="app"> {{ msg}} </div&g...
Vue相关操作
ImmortalSYM的博客
12-08 763
Vue相关操作 计算属性computed —setter和getter：在计算属性中一般会封装get()和set()方法，但是一般是set()方法是不常用的，因此计算属性只有get()方法，表现为只读属性； —因为computed中都含有get()方法，所以一般简写为如下方式： —一定要注意，计算属性中传递的参数是一个对象，因此在访问计算属性时，可以直接使用{{}}进行读取内容； <div id = "app"> <h2>{{fullName}}</h2> &lt
Vue基本操作
qq_43589698的博客
07-07 210
Vue基本操作 生命周期 create 创建 mount 挂载 update 更新 destroy 销毁 命令 v-model：双向绑定 （MVVM模型中的VM） v-on: 事件绑定 缩写为 @ v-bind：在标签内插值，比如动态变化某个class的属性 v-text: 代替{{ }} 插值表达式 v-html: 同v-text，若插入的值包含HTML代码直接渲染 v-for: 遍历 v-for="(item,index) in items" 注意顺序 可遍
v2.6.10-vue.js&vue.min.js&vue.common.js&vue.runtime.js等14个资源
03-12
内容：vue.js、vue.min.js、vue.common.js、vue.common.dev.js、vue.common.prod.js、vue.esm.browser.js、vue.esm.browser.min.js、vue.runtime.js、vue.runtime.min.js、vue.runtime.esm.js、vue.runtime.common....
vue.js和vue.min.js
06-13
Vue.js和Vue.min.js是两种版本的同一款前端JavaScript框架——Vue.js的实现。Vue.js由尤雨溪（Evan You）开发，旨在为构建用户界面提供简洁、易用且可扩展的工具。这两个文件在功能上是相同的，但它们在实际应用中...
vue.js项目实战,vue.js项目实战pdf下载,JavaScript
09-10
Vue.js 是一款轻量级的前端JavaScript框架，由尤雨溪开发，因其简单易学、高效灵活的特性，在Web开发领域迅速崛起。本资源聚焦于"Vue.js项目实战"，旨在帮助开发者通过实际操作深入理解Vue.js的核心概念和技术，从而...
基于Vue.js和Node.js音乐 播放器的设计与实现
04-18
总结来说，基于Vue.js和Node.js的音乐播放器设计与实现涉及前端UI设计、后端服务构建、数据库操作、文件系统交互等多个方面。通过合理利用这些技术，我们可以创建出一款功能齐全、用户体验良好的在线音乐播放器。
基于Vue.js-Node.js-Mongodb 的本人本科毕业设计.zip
10-05
Vue.js 是一个轻量级的前端JavaScript框架，它以其易用性、灵活性和组件化特性而闻名。Vue.js的核心理念是通过声明式渲染，使得开发者可以专注于描述视图应该显示什么，而无需关注如何实现这一过程。在Vue.js中，你...
Vue的一些简单操作
thisCheng的博客
06-07 188
vue
vue 基础操作
weixin_44091775的博客
12-13 94
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 ...
VUE的基础操作
Cs_sssss的博客
06-19 262
一.mustache 1.{{ msg }}是{{ this.msg }}的缩写 2.mustache语法糖对支持大部分数据类型如： 基础数据类型： number string boolean 复杂数据类型: Object( array function ) 特殊数据类型: null undefined 但是mustache不支持console.log和alert 3.指令： 写法：v-xxx ...
vuejs 基本操作
jessionlin的博客
03-06 2943
一、安装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的使用教程
小翁的博客
07-19 1607
vue 基本操作流程
qq_44977477的博客
06-26 837
Vue 1、必须安装node.js，安装git（这个可以不用，不过习惯了） 2、安装webpack·npm install -g webpack 3、使用淘宝镜像（用cnpm命令代替npm，这个也可以不用安装，只是使用npm安装依赖包是会慢那么一点）：npm install -g cnpm --registry=https://registry.npm.taobao.org 4、安装vue的脚手架工具 npm install -g vue-cli 5、创建项目：vue init webpack vue
常用的vue操作
xiao-啸
07-17 191
过滤器/生命周期的钩子函数/模板语法{{}}/指令系统/Vue中的常用属性/Vue常用方法/Vue的过滤器/Vue的组件/组件的传值/Vue的全家桶( kfc ) vue+vue-router+vuex/使用vue-router/命名路由/动态路由匹配/编程式导航vs声明式导航 过滤器 ​ 1.局部过滤器 在当前组件内部使用过滤器 ​ 给某些数据 添油加醋 // 声明 filters:{ ...
Vue使用技巧
sinat_33100753的博客
05-11 755
一.组件注册import Vue from 'vue'function capitalizeFirstLetter(string) { return string.charAt(0).toUpperCase() + string.slice(1)}const requireComponent = require.context( '.', true, /\.vue$/ //找到c...
Vue.js与Node.js打造全栈音乐播放器
资源摘要信息: "基于Vue.js和Node.js音乐播放器的设计与实现" 在当今数字化时代，音乐播放器是人们日常生活中不可或缺的应用之一。传统的音乐播放器多为桌面或手机端的本地应用，而随着Web技术的迅猛发展，基于Web...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值