七夕杯—密码签到

**七夕杯——密码签到**

**概述**

七夕杯是由中国计算机协会主办的一项网络安全竞赛活动。作为一名参与者，我决定开发一个密码签到的系统，以便于参加比赛的选手能够轻松地完成签到流程。

**系统设计**

本系统将使用以下技术栈：

* 后端：Node.js + Express.js* 前端：HTML + CSS + JavaScript (Vue.js)
* 数据库：MongoDB**后端开发**

首先，我们需要在 Node.js 中创建一个新项目，并安装所需的依赖项。

bashnpm init -ynpm install express body-parser mongoose

javascript// app.jsconst express = require('express');
const bodyParser = require('body-parser');
const mongoose = require('mongoose');

const app = express();

app.use(bodyParser.json());

mongoose.connect('mongodb://localhost/seventhnight', { useNewUrlParser: true, useUnifiedTopology: true });

const User = mongoose.model('User', {
 username: String,
 password: String});

// GET /signinapp.get('/signin', (req, res) => {
 res.render('signin');
});

// POST /signinapp.post('/signin', async (req, res) => {
 const { username, password } = req.body;
 const user = await User.findOne({ username });
 if (!user || user.password !== password) {
 return res.status(401).send({ message: 'Invalid username or password' });
 }
 // Sign in successfully});

// GET /signupapp.get('/signup', (req, res) => {
 res.render('signup');
});

// POST /signupapp.post('/signup', async (req, res) => {
 const { username, password } = req.body;
 const user = await User.findOne({ username });
 if (user) {
 return res.status(400).send({ message: 'Username already exists' });
 }
 // Create new user});

app.listen(3000, () => {
 console.log('Server listening on port3000');
});

bashnpm init -ynpm install vue-router vue-resource axios

javascript// main.jsimport Vue from 'vue';
import App from './App.vue';
import router from './router';

Vue.config.productionTips = false;

new Vue({
 render: h => h(App),
}).$mount('#app');

// router/index.jsimport Vue from 'vue';
import Router from 'vue-router';
import signin from '../views/signin.vue';
import signup from '../views/signup.vue';

Vue.use(Router);

export default new Router({
 routes: [
 {
 path: '/signin',
 name: 'Sign in',
 component: signin },
 {
 path: '/signup',
 name: 'Sign up',
 component: signup }
 ]
});

// views/signin.vue<template>
 <div>
 <h1>Sign in</h1>
 <form @submit.prevent="signin">
 <input type="text" v-model="username" placeholder="Username">
 

 <input type="password" v-model="password" placeholder="Password">
 

 <button type="submit">Sign in</button>
 </form>
 </div>
</template>

<script>
export default {
 data() {
 return {
 username: '',
 password: ''
 };
 },
 methods: {
 signin() {
 axios.post('/signin', { username, password })
 .then(response => {
 console.log(response.data);
 })
 .catch(error => {
 console.error(error);
 });
 }
 }
};
</script>

// views/signup.vue<template>
 <div>
 <h1>Sign up</h1>
 <form @submit.prevent="signup">
 <input type="text" v-model="username" placeholder="Username">
 

 <input type="password" v-model="password" placeholder="Password">
 

 <button type="submit">Sign up</button>
 </form>
 </div>
</template>

<script>
export default {
 data() {
 return {
 username: '',
 password: ''
 };
 },
 methods: {
 signup() {
 axios.post('/signup', { username, password })
 .then(response => {
 console.log(response.data);
 })
 .catch(error => {
 console.error(error);
 });
 }
 }
};
</script>

bashcurl -X GET  -X POST -H "Content-Type: application/json" -d '{"username": "john", "password": "123456"}'  -X GET  -X POST -H "Content-Type: application/json" -d '{"username": "jane", "password": "654321"}'  />
**总结**

在本文中，我们开发了一个密码签到的系统，使用 Node.js + Express.js 作为后端技术栈，Vue.js + Vue Router + vue-resource + axios 作为前端技术栈。我们使用 MongoDB 来存储用户信息，并使用 Postman 或 curl 来测试我们的 API。