vue 连接数据库

//页面
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>VUE登录</title>
    <script src="vue/vue.js"></script>
    <script src="vue/axios.min.js"></script>
</head>
<body>
<div id="aa" class="a">
    <fieldset>
        <legend>员工信息录入</legend>
        用户名:<input type="text" v-model="name"><br>
        密&nbsp&nbsp&nbsp码:<input type="password" v-model="pass"><br>
        <button @click="conn(name,pass)">(axios)get登录</button>
        <button @click="login(name,pass)">(axios)post登录</button><br>
        登录信息:{{msg}}
    </fieldset>
</div>
<script>
    var  b=new Vue({
        el:"#aa",
        data:{
            getURL:"http://localhost:8080/servlet/servlet",
            name:"",
            pass:"",
            msg:""
        },
        methods:{
            conn(name,pass){
                axios.get(this.getURL,{params:{name:this.name,pass:this.pass}}).then(
                    res=>{
                        this.msg=res.data;
                    }
                ).catch(
                    err=>{
                        this.msg=err.status
                    }
                )
            },
            login(name,pass){
                var params=new URLSearchParams();
                params.append("name",this.name);
                params.append("pass",this.pass);
                axios.post(this.getURL,params,
                    {header:{"content-type":"application/x-www-form-urlencoded"}}).then(
                        res=>{
                            this.msg=res.data;
                        }
                ).catch(
                    err=>{
                        this.msg=err.status;
                    }
                )
            }
        }
    })
</script>
</body>
</html>

//servlet

package com.ln.servlet;

import com.ln.dao.UsersMapper;
import com.ln.entity.Users;
import com.ln.service.UsersService;
import org.springframework.context.ApplicationContext;
import org.springframework.context.support.ClassPathXmlApplicationContext;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.List;

@WebServlet(name = "Servlet")
public class Servlet extends HttpServlet {

    protected void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        PrintWriter out=response.getWriter();
        request.setCharacterEncoding("UTF-8");
        response.setCharacterEncoding("UTF-8");
        ApplicationContext applicationContext=
                new ClassPathXmlApplicationContext("applicationContext.xml");
        UsersMapper usersMapper =(UsersMapper) applicationContext.getBean("getUsersDAO");
        String name=request.getParameter("name");
        System.out.println(name);
        String pass=request.getParameter("pass");
        List<Users>list=usersMapper.findAllNameAndPass(name,pass);
        if (list.size()>0){
            out.print("success");
//            response.sendRedirect("../success.jsp");
        }else {
            out.print("请重新登录");
//            response.sendRedirect("../index14.html");
        }

    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doPost(request,response);
    }
}

//有乱码的话 再加个filter

package com.ln.filter;

import javax.servlet.*;
import javax.servlet.annotation.WebFilter;
import java.io.IOException;

@WebFilter(filterName = "Filter")
public class Filter implements javax.servlet.Filter {
    public void destroy() {
    }

    public void doFilter(ServletRequest req, ServletResponse resp, FilterChain chain) throws ServletException, IOException {
        System.out.println("guolvqi");
        req.setCharacterEncoding("UTF-8");
        resp.setCharacterEncoding("UTF-8");
        chain.doFilter(req, resp);
    }

    public void init(FilterConfig config) throws ServletException {

    }

}

//web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd"
         version="4.0">
    <servlet>
        <servlet-name>s</servlet-name>
        <servlet-class>com.ln.servlet.Servlet</servlet-class>
    </servlet>
    <servlet-mapping>
        <servlet-name>s</servlet-name>
        <url-pattern>/servlet/servlet</url-pattern>
    </servlet-mapping>
    <filter>
        <filter-name>filter1</filter-name>
        <filter-class>com.ln.filter.Filter</filter-class>
    </filter>
    <filter-mapping>
        <filter-name>filter1</filter-name>
        <url-pattern>/*</url-pattern>
    </filter-mapping>
</web-app>
### 如何在 Vue.js 中连接和操作数据库 #### 使用后端中间件架构 Vue.js 主要用于构建前端用户界面,本身并不直接支持与关系型数据库如 SQL Server 或 MySQL 的交互。为了实现数据交换,通常采用前后端分离的设计模式,在这种情况下,Vue 前端会向后端发送 HTTP 请求以获取或提交数据[^1]。 对于想要连接 SQL Server 数据库的情况,推荐的做法是在服务器一侧设置 RESTful API 接口服务(比如利用 Node.js),由该接口负责处理来自客户端的所有请求并执行相应的 CRUD 操作。这样不仅提高了系统的可维护性和安性,还使得应用程序更易于扩展和支持多种类型的客户端访问。 当涉及到具体的技术选型时,如果选用 Node.js 作为后端框架,则可以通过 `mysql` 模块轻松完成对 MySQL 数据库的操作;而对于 SQL Server, 则有专门设计的驱动程序可供选择,例如 tedious 或 mssql 节点包[^4]。 #### 实现步骤概述 - **创建API层**: 开发人员可以在 Express.js 上建立一套完整的 Web APIs 来管理业务逻辑以及同数据库之间的通信。 - **配置ORM工具**(可选): 对于复杂的应用场景来说,引入对象关系映射(ORM)解决方案可能会简化很多工作量,像 Sequelize 就是一个不错的选择,它能够很好地兼容多个 RDBMS 平台包括但不限于 PostgreSQL, MySQL 和 SQLite3. - **安措施考虑**: 不论采取何种方式接入外部存储系统都应当重视身份验证机制、输入校验等方面的安防护策略. ```javascript // 示例:Node.js + Express 创建简单 GET API 获取数据 const express = require('express'); const mysql = require('mysql'); let app = express(); app.get('/api/data', function(req, res){ let connection = mysql.createConnection({ host : 'localhost', user : 'me', password : 'secret', database : 'my_db' }); connection.connect(); connection.query('SELECT * FROM my_table', function(error, results, fields) { if (error) throw error; console.log(results); res.json(results); // 返回 JSON 格式的查询结果给前端 }); connection.end(); // 关闭数据库链接 }); ``` 上述代码片段展示了如何基于 Node.js 及其流行的 web framework ——Express 设置一个基本的服务端路由来响应特定 URL 下的 GET 请求,并通过调用 MySQL 查询语句返回指定表内的记录集至前端页面显示. 值得注意的是,虽然可以直接从 Vue 组件内部发起 AJAX 调用来消费这些 API ,但在生产环境中最好还是遵循最佳实践——即把所有的网络活动封装在一个独立的服务文件里或者 Vuex store 内部以便更好地管理和测试异步流程[^3].
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值