不知道写的代码和操作流程对不对，但是目前一点击按钮报错信息却是jQuery的

页面文件 index.html

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>test</title>
    <style>
        input {
            width: 200px;
            height: 30px;
            line-height: 30px;
            border: 1px solid blue;
            margin: 20px 0;
        }

        p {
            width: 200px;
            text-align: center;
        }

        button {
            background-color: blue;
            color: #fff;
            border: none;
            padding: 10px;
        }
    </style>
</head>

<body>
    
    <form>
        <input type="text" name="username" id="username" placeholder="请输入昵称"><br>
        <input type="password" name="password" id="password" placeholder="请输入密码"><br>
        <p>
            <button id="register">注册</button>
            <button id="login">登录</button>
        </p>
    </form>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        //注册按钮绑定事件
        $('#register').on('click', function(e) {
            // 阻止默认行为
            e.preventDefault();
            // 获取用户名和密码
            const username = $('#username').val;
            const password = $('#password').val;
            // 发送ajax请求
            $.ajax({
                url: 'http://localhost/users/register',
                type: 'POST',
                data: {
                    username,
                    password
                },
                success: function(data) {
                    console.log(data);
                }
            })
        });

        //登录按钮绑定事件
        $('#login').on('click', function(e) {
            // 阻止默认行为
            e.preventDefault();
            // 获取用户名和密码
            const username = $('#username').val;
            const password = $('#password').val;
            // 发送ajax请求
            $.ajax({
                url: 'http://localhost/users/login',
                type: 'POST',
                data: {
                    username,
                    password
                },
                success: function(data) {
                    console.log(data);
                }
            })
        });
    </script>
</body>

</html>

服务端项目文件：

app.js

const Koa = require('koa')
const app = new Koa()
const views = require('koa-views')
const json = require('koa-json')
const onerror = require('koa-onerror')
const bodyparser = require('koa-bodyparser')
const logger = require('koa-logger')
const static = require('koa-static')
const session = require('koa-generic-session')
const cors = require('cors')

const index = require('./routes/index')
const users = require('./routes/users')
const test = require('./routes/test')

// error handler
onerror(app)

// middlewares
app.use(bodyparser({
    enableTypes: ['json', 'form', 'text']
}))
app.use(json())
app.use(logger())
app.use(static(__dirname + '/public'))

app.use(views(__dirname + '/views', {
    extension: 'pug'
}))

app.keys = [''] // 秘钥

app.use(session({
    // 配置 cookie
    cookie: {
        path: '/',
        httpOnly: true,
        maxAge: 24 * 60 * 60 * 1000
    }
}))

// 服务端支持跨域
app.use(cors({
    origin: '*', // 支持任何域，可以跨域
    credentials: true // 允许跨域的时候带着 cookie
}))

// logger
app.use(async(ctx, next) => {
    const start = new Date()
    await next()
    const ms = new Date() - start
    console.log(`${ctx.method} ${ctx.url} - ${ms}ms`)
})

// routes
app.use(index.routes(), index.allowedMethods())
app.use(users.routes(), users.allowedMethods())
app.use(test.routes(), test.allowedMethods())

// error-handling
app.on('error', (err, ctx) => {
    console.error('server error', err, ctx)
});

module.exports = app

db/db.js

const mongoose = require('mongoose')

const url = 'mongodb://localhost:27017'
const dbName = 'test'

mongoose.set('useCreateIndex', true)
mongoose.set('useFindAndModify', true)

mongoose.connect(`${url}/${dbName}`, {
    useNewUrlParser: true,
    useUnifiedTopology: true
})

const conn = mongoose.connection

conn.on('error', err => {
    console.log('mongoose连接出错', err)
})

module.exports = mongoose

db/model.js

const mongoose = require('./db')

// 定义 User Schema
const UserSchema = mongoose.Schema({
    username: {
        type: String,
        required: true,
        unique: true
    },
    password: {
        type: String,
        required: true
    }
}, {
    timestamps: true
})

// 定义 User Model
const User = mongoose.model('user', UserSchema)

module.exports = User

middlewares/login.js

// 登录验证的中间件

async function loginCheck(ctx, next) {
    const userInfo = ctx.session.userInfo
    if (userInfo && userInfo.username && userInfo.password) {
        // 登录验证成功
        await next()
        return
    }
    // 登录验证失败
    ctx.body = {
        errno: -1,
        message: '请输入正确的用户名和密码'
    }
}

module.exports = loginCheck

routes/test.js

const router = require('koa-router')()
const { User } = require('../db/model')
const login = require('../middlewares/login')

router.prefix('/users')

router.post('/register', async(ctx) => {
    // 获取请求
    const body = ctx.request.body

    // 获取请求数据
    const { username, password } = body

    // 插入到数据库
    const newUser = await User.create({
        username,
        password
    })

    // 设置返回信息
    ctx.body = {
        errno: 0,
        message: '注册成功'
    }
})

router.post('/login', login, async(ctx) => {
    // 获取请求
    const query = ctx.query

    // 插入到数据库
    const userInfo = await User.find({
        username: query.username
    })

    // 设置返回信息
    ctx.body = {
        errno: 0,
        data: userInfo,
        message: '登录成功'
    }
})

module.exports = router

然后我把index.html是放在phpstudy文件夹下并且启动了的：

然后打开了数据库并且连接了

然后在数据库中建立了这个test数据库及users集合：

不知道是否要在项目文件夹中运行npm run dev，在补充了插件后运行也成功了：

package.json:

{
  "name": "test4",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "start": "node bin/www",
    "dev": "./node_modules/.bin/nodemon bin/www",
    "prd": "pm2 start bin/www",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "dependencies": {
    "cors": "^2.8.5",
    "debug": "^4.1.1",
    "koa": "^2.7.0",
    "koa-bodyparser": "^4.2.1",
    "koa-convert": "^1.2.0",
    "koa-generic-session": "^2.0.4",
    "koa-json": "^2.0.2",
    "koa-logger": "^3.2.0",
    "koa-onerror": "^4.1.0",
    "koa-router": "^7.4.0",
    "koa-static": "^5.0.0",
    "koa-views": "^6.2.0",
    "mongoose": "^5.9.21",
    "pug": "^2.0.3"
  },
  "devDependencies": {
    "nodemon": "^1.19.1"
  }
}

最后在页面中输入用户名和密码，点击注册后，出现如下错误：

一开始我的jQuery地址使用的是官网的：

https://code.jquery.com/jquery-3.5.1.min.js

然后换成了网上找的百度的引用地址：

http://libs.baidu.com/jquery/1.9.1/jquery.min.js

结果报错变了：

然后又换成了老师回答中的实例的地址：

https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js

结果这次报错和第一次的jQuery地址报错一样，都是

不知道这到底是jQuery地址有问题，还是我哪个地方代码错误？还是我什么地方操作错了呢？

Aurora_Meteor 2020-07-06

源自：登录实现方案与实践 2-11 自由编程

收起

7回答

好帮手慕慕子回答被采纳获得+3积分 2020-07-07 11:24:35

同学你好，以同学第一次粘贴的代码测试，jQuery引入地址是没有问题，是代码中存在问题，具体解答如下：

val是一个方法，调用时需要添加括号，建议修改：
因为启动node服务，默认是3000端口，所以在访问接口时，需要添加上端口号
登录时不需要使用中间件进行验证是否登录，建议去掉。
调整获取登录信息的方式
因为model.js中导出的只有一个变量，所以在test.js中直接定义常量接收就可以了。建议修改：
使用 koa2-cors 插件设置允许跨域，即：
安装插件 cnpm i koa2-cors --save
app.js引入koa2-cors
设置允许跨域
经过上述修改后，测试结果如下：
注册
登录
数据库中也正常存入了数据

同学可以测试理解下，祝学习愉快~

收起回答

Aurora_Meteor 提问者 #1

老师我按您的修改以后，还有其他错误。我是应该把这里都解决完了呢，还是直接学下一节的综合案例去呢？

2020-07-07 12:13:07

好帮手慕慕子 2020-07-07 19:14:21

同学你好，对于你的问题解答如下：

后台返回的信息，在ajax的success方法中就可以获取到，同学如下所示代码书写就是获取返回的信息

老师前几次的回复是为了方便同学直观的看到效果，所以截图在network中查看返回的信息
是的，前台注册、登录要显示验证结果是在前台中设置（也就是这里的html文件中设置）
ajax请求是异步的，直接在ajax外面获取不到数据。示例：
test打印结果是undefined，所以说不可以直接在ajax外使用返回的数据

推荐同学参考老师上次回复的内容，直接在ajax内部的success中进行判断，然后提示用户，老师上一次回复中，也给出了示例，同学可以测试下

祝学习愉快~

收起回答

好帮手慕慕子 2020-07-07 14:58:41

同学你好，如下如所示圈起来的理解是对的

是指验证是否登录成功吗？如果是的话，直接在success方法中验证就可以了，示例：

测试结果

这个练习，重点是结合所学知识完成登录和注册功能，对于逻辑的严谨性不做要求，感受下前后端开发的流程就可以了。

老师在这里给同学提供一个参考实现的思路，同学了解一下就可以了。示例：在返回数据之前，添加判断，已经注册过的用户，直接返回提示信息，不再写入数据库，没有注册过的用户才添加到数据库中

测试结果如下：

在登录接口这里添加判断，如果数据库中存在，表示已经注册了，可以直接登录，否则提示该用户该没有注册

测试结果如下：

因为实际工作中是要根据具体要实现的功能进行逻辑编写的。目前阶段，重点是学习node相关的基础知识和开发流程，对于逻辑不做要求的

同学可以测试理解下，祝学习愉快~

收起回答

提问者 Aurora_Meteor #1

后台设置的返回信息都是在network中的是吗？前台注册、登录要显示的验证结果还是要在前台中设置吧，前台显示的验证结果是在ajax请求外部设置的吧？就是点击按钮后的弹框什么的那种信息，用户可以看到的。

2020-07-07 15:23:44

好帮手慕慕子 2020-07-07 13:37:31

同学你好，时间比较着急的话，可以直接学下一节的综合案例，如果时间比较充裕的话，建议处理完这里的再开始学习下一节的案例，

如下所示位置也需要修改下：

同学修改后可以再测试下，祝学习愉快~

收起回答

提问者 Aurora_Meteor #1

老师我修改后测试发现不报错了。但是我发现如果输入的用户名和密码是没有注册过的，点击登录按钮，控制台也会打印‘登录成功’；然后我把数据库中注册的信息都删除以后，直接在页面中输入用户名和密码，在数据库中没有任何数据的情况下，点击登录按钮，控制台一样会打印‘登录成功’。 ‘注册成功’和‘登录成功’都是页面文件index.html中的script中的ajax语句打印的，这是因为只要ajax请求成功了index.html中script的ajax部分的success函数就会执行，所以会打印出来嘛？要验证的话，是在ajax外面设置并且在外面输出验证结果对吗？

2020-07-07 13:49:15