
Web全栈案例
文章平均质量分 64
Vue+Node+MySQL/MongoDB 全栈案例
柯晓楠
一位前端技术爱好者
展开
-
基于 koa2 + mysql 实现用户管理的 CRUD 代码实践
基于koa2+mysql实现数据的增删改查,在封装代码时使用MVC的架构设计代码结构,对代码做了解耦原创 2022-07-13 11:35:15 · 634 阅读 · 0 评论 -
koa2 连接 mysql 数据库实现增删改查操作
koa2 是目前流行的Node.js开发框架之一,使用koa2连接mysql数据库也是使用koa2开发项目的基础。原创 2022-07-13 10:02:23 · 2514 阅读 · 0 评论 -
基于 Vue + Codemirror 实现 SQL 在线编辑器
一、项目介绍本项目是基于 Vue2 + Codemirror 开发的 Web 版 SQL 编辑器,提供了以下功能:在线运行 SQL 语句实时命令提示(支持表名、字段名、SQL关键词提示)查看 SQL 执行结果提交 SQL 命令集快捷使用命令集SQL 语句格式化SQL code differ动态设置编辑器配置项实时查看表结构前端项目地址:https://gitee.com/web1024cn/vue-sqleditor本项目提供了配套的后端示例代码(基于 Node + Expres原创 2022-03-06 19:23:51 · 11825 阅读 · 4 评论 -
Node+Express实现文件的上传下载与删除
1. 演示效果实现一个服务端的静态资源管理器,可以对服务端的文件进行上传、下载、删除等操作,并且对中文的文件名做了处理。效果如下:2. 创建项目本项目是使用 express 模板生成器创建的,需要先安装 express-generator 模板生成器,在终端运行:$ cnpm i -g express-generator然后在需要创建项目的文件夹路径处,打开终端依次执行下列命令:# 创建项目$ express -e myapp# 进入项目的目录$ cd myapp# 初始化依赖原创 2021-09-04 12:27:46 · 3116 阅读 · 0 评论 -
Node项目中使用jsonwebtoken实现JWT认证
1、需求说明在前后端分离开发中,前端使用Vue.js框架,通过axios发送异步HTTP请求,服务端就无法使用session的方式保存用户的登录信息,因为客户端的每一次异步请求在服务端都会被认为是一个新的session。我们可以使用jwt(jsonwebtoken)的方式实现用户的校验。2、安装相关依赖服务端:本文中使用Express作为服务端框架,需要在服务端安装以下JWT依赖:cnpm i jsonwebtoken --savecnpm i express-jwt --save前端:在原创 2021-04-27 23:55:13 · 1062 阅读 · 3 评论 -
Node.js项目中关于env环境变量配置
1、需求说明使用Node.js作为后端开发环境的话,无论是使用Express框架还是使用Koa框架,项目上线后,很多私密的信息都要使用生产环境的环境变量配置,例如数据库连接的用户名和密码等。2、创建 .env文件.env文件是用来自定义配置的一个简单方法,可以将一些不能在代码中存储的敏感/账号数据从代码中剥离出来,作为环境变量存储在环境中。在项目的根目录下创建 .env文件,在Windows系统中创建文件时会提示需要输入文件名,可以在此目录处启动命令行工具,输入下面的命令来创建:type nul&原创 2021-04-21 22:55:31 · 6111 阅读 · 0 评论 -
win10系统中设置MongoDB用户名密码连接数据库
1、需求说明在Win10系统中安装好了MongoDB数据库以后,为了增加数据库的安全性,需要设置用户名和密码才能连接数据库。本文中使用的MongoDB 4.4.5 的版本,数据库下载地址:https://www.mongodb.com/try/download/community数据库安装教程:https://blog.csdn.net/p445098355/article/details/1131782422、设置MongoDB用户名和密码2.1、开启验证先找到MongoDB的安装目录,在安装原创 2021-04-21 21:17:41 · 2257 阅读 · 0 评论 -
Node Express框架快速入门教程
安装Express创建项目目录,例如在本地D盘创建myapp项目 D:/myapp在myapp项目根目录打开命令提示行工具,执行如下命令:# 初始化npm init -y# 安装expresscnpm i express --save# 安装ejs模板引擎cnpm i ejs --save项目目录结构目录结构按照MVC模式进行创建,依次新建controller、views、model、public等文件夹,结构如下:- controller 控制层- views 视图层- mod原创 2021-01-26 13:45:09 · 6027 阅读 · 2 评论 -
mongoDB数据库基础入门教程
1 数据库概述及环境搭建1.1 为什么要使用数据库大家先想一个问题,你在手机app的京东将商品加入到购物车中,那么在pc端登录京东后,购物车中商品还存在吗?答案是肯定的,那数据存在哪了呢?数据库可以结构化存储大量的数据信息,方便用户进行有效的检索和访问。数据库可以有效地保持数据信息的一致性、完整性、降低数据冗余。数据库可以满足应用的共享和安全方面的要求,把数据放在数据库中在很多情况下也是出于安全的考虑。数据库技术能够方便智能化地分析,产生新的有用信息。1.2 什么是数据库数据库即存储数原创 2021-01-26 13:35:44 · 889 阅读 · 0 评论 -
Express项目中使用Vue.js整合ejs模板引擎
1、前言在使用Node.js的Web框架Express时,经常会用到ejs作为模板引擎,使用Express+ejs主要是为了实现服务端渲染,利于SEO优化。所以,本篇博客仅仅是为了学习Express而写的,在真实的项目开发中不推荐使用这种方式。2、问题描述在使用Express+ejs开发Web项目时,会遇到一个问题,当服务端渲染一个数组或结构比较复杂的对象时,在前端获取不到值,具体问题如下:routes/index.js文件代码:var express = require('express');原创 2021-01-04 18:08:03 · 2717 阅读 · 1 评论 -
基于Node实现爬虫程序抓取百度热搜数据
技术栈下面是本案例使用的开发环境与模块:Node.js:作为爬虫程序的开发环境request:用于发送HTTP请求的模块cheerio:用于解析DOMiconv-lite:用于解析数据的编码案例描述使用Node.js实现一个简单的爬虫程序,抓取百度热搜的数据,抓取的网站地址:http://top.baidu.com/buzz?b=1&c=513&fr=topbuzz_b341效果图如下:代码示例const request = require('request')原创 2020-11-23 22:09:31 · 1286 阅读 · 1 评论 -
node+express+ajax实现单文件和多文件上传
1、安装依赖命令:cnpm i multer --save2、单文件上传2.1、使用表单方式提交前台页面代码:<h3>单文件上传-使用form</h3><form action="/upload/form" method="POST" enctype="multipart/form-data" > <input type="file" name="myfile"> <button type="submit">上传&l原创 2020-10-21 14:31:59 · 732 阅读 · 1 评论 -
vue+express实现多文件上传
前端代码<template> <div> <div> <p> 文件1:<input type="file" @change="fileSelect($event)" /> </p> <p> 文件2:<input type="file" @change="fileSelect($event)" /> </p> <p> 文件3:&l原创 2020-06-02 20:16:59 · 930 阅读 · 0 评论 -
vue+express实现文件上传,显示上传进度条
1. 案例介绍使用前后端分离开发的模式实现文件上传,前端使用Vue框架,后端使用node的express框架,并且显示上传进度条。效果演示:2. 核心代码2.1 环境搭建前端环境# 安装Vue脚手架cnpm i -g @vue/cli# 创建项目vue create myapp# 进入项目目录cd myapp# 安装axioscnpm i axios --save# 启动项目npm run serve后端环境# 安装express脚手架cnpm i -g exp原创 2020-06-02 19:36:10 · 6571 阅读 · 1 评论 -
express操作MySQL数据库实现CRUD的封装
1、目录结构核心目录项目 -- routes -- stu.js #路由 -- db -- mysql.js #数据库配置 -- controller -- stuController.js #控制层2、核心代码mysql.js 文件const mysql = require('mysql')// 创建数据库连接const conn = mysql.createConnection({ host: 'localhost', user: 'root', pas原创 2020-05-29 16:28:52 · 1991 阅读 · 2 评论 -
express连接MySQL数据库实现增删改查
1、express操作数据库1.1、安装mysql模块cnpm i mysql --save1.2、连接mysql数据库本地先安装好mysql,这里就不再赘述mysql数据库的安装过程了。在mysql数据库中创建名为 stusystem 的数据库,创建 stu 表,在表中随意添加两条数据。创建 mysql.js 文件:const mysql = require('mysql')// 创建mysql连接const connection = mysql.createConnection({原创 2020-05-29 16:27:08 · 6052 阅读 · 0 评论 -
express接收get和post请求参数
1、环境搭建执行命令:# 安装express-generator脚手架cnpm i -g express-generator# 创建项目express node-demo# 安装依赖cd node-democnpm i# 启动服务npm start安装nodemon,修改项目源码后,无需重启服务就可以实现热部署# 安装nodemoncnpm i -g nodemon在package.json文件中配置"scripts": { "start": "nodemon原创 2020-05-29 16:18:43 · 5422 阅读 · 1 评论