Express学习（六）数据库文件结构index.jsindex.cssindex.htmllayout.htmlapp

文件结构

index.js

$(function (argument) {
    $('#btn').click(function (ev) {
        ev.preventDefault();
        // alert(123);
        $.ajax({
            url:"res",
            type:"get",
            dataType:"json",
            data:{
                username:$("#username").val(),
                password:$("#password").val()
            },
            success:function (res) {
                console.log(res);
            },
            error:function () {
                alert('err')
            }
        })
    });
});

index.css

#form{
    width: 500px;
    margin: 100px auto;
}

index.html

{% extends 'layout.html' %}

{% block title %}index {{title}}{% endblock %}

{% block head %}
<link rel="stylesheet" href="stylesheets/index.css">
<script src="scripts/index.js"></script>
{% endblock %}

{% block content %}
<form id="form">
    <div class="form-group">
        <label for="username">邮箱</label>
        <input type="email" class="form-control" id="username" placeholder="请输入用户名">
    </div>
    <div class="form-group">
        <label for="password">密码</label>
        <input type="password" class="form-control" id="password" placeholder="请输入密码">
    </div>
    <button type="submit" id="btn" class="btn btn btn-info">提交</button>
</form>
{% endblock %}

layout.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{% block title %}{% endblock %}</title>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    {% block head %}
    {% endblock %}
</head>
<body>
{% block content %}
{% endblock %}
</body>
</html>

app.js

// 第三方模块的加载
const express = require("express");
const app = new express();
const mysql = require("mysql");
app.use(express.static('public'));
// 配合 swig
const swig = require('swig');
app.set('view engine', 'html');
app.engine('html', swig.renderFile);

// 设置 mysql
const connection = mysql.createConnection({
    host: 'localhost',
    user: 'root',
    password: '123456',
    database: 'db_user'
});
connection.connect();

// 配置路由
app.get("/", function (req, res, next) {
    // res.json({name: "haha"});
    res.render('index',{
        title:"第一个express程序"
    });
});
app.get("/res", function (req, res, next) {
    const {username, password} = req.query;
    const post = {
        t_user_name: username,
        t_user_password: password
    };

    const query = connection.query('INSERT INTO t_user SET ?', post, function (error, results, fields) {
        if (error) {
            res.json({
                suss: 1,
                msg: "失败"
            });
            throw error;
        }
        res.json({
            suss: 0,
            msg: "成功"
        });
    });
    console.log(query.sql);
});
// 容错机制
app.get("*", function (req, res) {
    res.status(404);
    res.end("404");
});

app.use(function (err, req, res) {
    res.status(500);
    res.end("error...", err);
});

app.listen(3000, function () {
    console.log("server is running...");
});