用MySQL+node+vue做一个学生信息管理系统(一):配置项目

先用npm init -y生成配置文件
在这里插入图片描述

在项目下新建src文件夹,app.js文件。src目录用来放静态资源文件,app.js是服务器文件,index.js是vue的入口文件

在这里插入图片描述

使用npm install express下载express框架

在app.js文件夹开启node服务,监听的端口为3000,并且开放静态资源文件的src目录

const express = require('express');
const app = express();
const path = require('path');
//开放静态资源访问,只需要输入文件名即可,不需要输入文件夹
app.use(express.static(path.join(__dirname,'src')));
app.listen(3000);

使用node app.js发现node服务启动成功
在这里插入图片描述

安装webpack:
1.运行npm install webpack webpack-cli -D命令
2.在项目根目录中,创建名为webpack.config.js的webpack配置文件
3.在webpack的配置文件中,初始化配置

module.exports = {mode:'development'//mode用来指定构建模式 production
}

4.在package.json配置文件中的scripts节点下,新增dev脚本如下:

"scripts":{"dev":"webpack"
}

5.使用npm run dev命令,启动webpack进行项目打包
6.webpack会帮我们创建一个dist目录,dist目录当中的main.js为低级的js代码

在这里插入图片描述

webpack配置打包的入口和出口:
默认打包的入口文件为src->index.js,打包的输出文件为dist->main.js文件
如果要修改打包的入口和出口,可以在webpack.config.js新增如下配置信息:

const path = require('path');
module.exports = {mode:'development',//mode用来指定构建模式 productionentry:path.join(__dirname,'./src/index.js'),//打包入口文件的路径output:{path:path.join(__dirname,'./src'),//输出文件的存放路径filename:'bundle.js',//输出文件的名称}
}

src目录下的bundle.js是webpack帮我们自动创建的,我们只需要在index.html当中引入bundle.js项目就能运行
在这里插入图片描述

打包处理css文件
1.运行npm install style-loader css-loader -D命令,安装处理css文件的loader
2.在webpack.config.js的module.rules数组中,添加loader规则如下:

module:{
rules:[{test:/.css$/,use:['style-loader','css-loader']},
]
}

test表示匹配的文件类型,use表示要用的loader

打包处理高级js语法:
1.npm install babel-loader @babel/core @babel/runtime -D
2.npm install @babel/preset-env @babel/plugin-transform-runtime @babel/plugin-proposal-class-properties -D
3.在项目根目录中,创建babel配置文件babel.config.js并初始化配置如下:

module.exports = {presets:[ '@babel/preset-env' ],plugins:[ '@babel/plugin-transform-runtime','@babel/plugin-proposal-class-properties' ]
}

4.在webpack.config.js的module -> rules数组中,添加loader规则如下:

{ test:/.js$/,use:‘babel-loader’,exclude:/node_modules/}

vue单文件组件的使用方法,在src目录下新建components目录

webpack中配置vue组件的加载器:
1.运行npm install vue-loader vue-template-compiler -D
2.在webpack.config.js配置文件中,添加vue-loader的配置项如下:

const VueLoaderPlugin = require('vue-loader/lib/plugin');
module.exports = {
module:{
rules:[//…其他规则{ test:/.vue$/,use:'vue-loader'}
]
},
plugins:[//其他插件new VueLoaderPlugin()
]
}

在webpack项目中使用vue:
1.运行npm install vue -S安装vue
2.在src->index.js入口文件中通过import Vue from ‘vue’来导入vue构造函数
3.创建vue的实例对象,并指定要控制的el区域
4.通过render函数渲染App根组件

import Vue from 'vue'
import App from './components/App.vue'
const vm = new Vue({el:'#app',render:h=>h(App)
})

做完以上的配置时,在命令行工具输入npm run dev,打包成功,并且src目录下多了bundel.js文件,把这个bundle.js引入在index.html中,输入node app.js打开服务器

在这里插入图片描述

然后打开localhost:3000发现项目已经可以成功运行
在这里插入图片描述

webpack.config.js

const path = require('path');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
module.exports = {mode:'development',//mode用来指定构建模式 productionentry:path.join(__dirname,'./src/index.js'),//打包入口文件的路径output:{path:path.join(__dirname,'./src'),//输出文件的存放路径filename:'bundle.js',//输出文件的名称},module:{rules:[{test:/.css$/,use:['style-loader','css-loader']},{ test:/.js$/,use:'babel-loader',exclude:/node_modules/},{ test:/.vue$/,use:'vue-loader'}]},plugins:[//其他插件new VueLoaderPlugin()]
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/39665.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Go语言--运算符

算术运算符 关系运算符 不能写0<a<10&#xff0c;要判断必须0<a&&a<10。因为int和bool不兼容 逻辑运算符 位运算符 赋值运算符 其他 运算符的优先级

国家海岸线变化评估:新英格兰和中大西洋沿岸海岸线的历史变化

National Assessment of Shoreline Change: Historical Shoreline Change along the New England and Mid-Atlantic Coasts 国家海岸线变化评估&#xff1a;新英格兰和中大西洋沿岸海岸线的历史变化 摘要 海滩侵蚀是美国许多公海沿岸的一个长期问题。随着沿岸人口的不断增加…

永辉超市购物卡有什么用?

感觉现在在超市买东西&#xff0c;还不如网购 这不&#xff0c;端午的时候&#xff0c;朋友送的永辉卡&#xff0c;一直没时间去用&#xff0c;我总担心过期 但是去了超市后&#xff0c;又不知道买什么&#xff0c;最后空手而归 还好收卡云可以回收永辉卡&#xff0c;两张三…

《C++20设计模式》适配器模式经验分享

文章目录 一、前言二、对于接口的讨论三、实现1、对象适配器1.1 UML类图1.2 实现 2、类适配器 四、最后 一、前言 从适配器模式开始就是类的组合聚合&#xff0c;类与类之间结构性的问题了。 适配器模式解决的问题&#xff1a; 适配器模式能够在不破坏现有系统结构的情况下&a…

mapreduce实现bean的序列化与反序列化

目录 序列化&#xff08;Serialization&#xff09; 反序列化&#xff08;Deserialization&#xff09; 事例操作 UserSale 重写序列化方法 重写反序列化 重写toString方法 SaleMapper SaleReducer SaleDriver 序列化&#xff08;Serialization&#xff09; 序列化是将…

【后端面试题】【中间件】【NoSQL】MongoDB的配置服务器、复制机制、写入语义和面试准备

MongoDB的配置服务器 引入了分片机制之后&#xff0c;MongoDB启用了配置服务器(config server) 来存储元数据&#xff0c;这些元数据包括分片信息、权限控制信息&#xff0c;用来控制分布式锁。其中分片信息还会被负责执行查询mongos使用。 MongoDB的配置服务器有一个很大的优…

WPF----自定义滚动条ScrollViewer

滚动条是项目当中经常用到的一个控件&#xff0c;大部分对外项目都有外观的需求&#xff0c;因此需要自定义&#xff0c;文中主要是针对一段动态的状态数据进行展示&#xff0c;并保证数据始终在最新一条&#xff0c;就是需要滚动条滚动到底部。 1&#xff0c;xaml中引入 <…

zxing-cpp+OpenCV根据字符串生成条形码

编译构建 需要使用到 CMake、Git、GCC 或 MSVC。 github 链接&#xff1a;https://github.com/zxing-cpp/zxing-cpp 编译之前请确保&#xff1a; 确保安装了 CMake 版本 3.15 或更高版本。 确保安装了与 C17 兼容的编译器(最低VS 2019 16.8 / gcc 7 / clang 5)。 编译构建…

Python面试宝典第4题:环形链表

题目 给你一个链表的头节点 head &#xff0c;判断链表中是否有环。如果存在环 &#xff0c;则返回 true 。 否则&#xff0c;返回 false 。 如果链表中有某个节点&#xff0c;可以通过连续跟踪 next 指针再次到达&#xff0c;则链表中存在环。 为了表示给定链表中的环&#xf…

AI智能体|AI打工我躺平!使用扣子Coze智能体自动生成和发布文章到微信公众号(一)

大家好&#xff0c;我是无界生长&#xff0c;国内最大AI付费社群“AI破局俱乐部”初创合伙人。这是我的第 44 篇原创文章——《AI智能体&#xff5c;AI打工我躺平&#xff01;使用扣子Coze智能体自动生成和发布文章到微信公众号&#xff08;一&#xff09;》 AI智能体&#xf…

《涅朵奇卡:一个女人的一生》读后感

这周的计划是看完海明威的《丧钟为谁而鸣》&#xff0c;但是因为下班晚&#xff0c;而且书的体量大&#xff0c;所以只看了一半。本来以为这周的阅读计划完不成了&#xff0c;不料昨天加完班后拿起新到的《涅朵奇卡&#xff1a;一个女人的一生》&#xff0c;不自觉就陷进去了&a…

端口聚合基础知识

一、什么是端口聚合 端口聚合是将多个物理端口捆绑在一起&#xff0c;形成一个逻辑链路&#xff0c;以实现带宽增加、提高冗余和负载均衡的技术。端口聚合&#xff0c;也称为以太通道&#xff08;Ethernet Channel&#xff09;&#xff0c;主要用于交换机之间的连接。在具有多…

开发数字药店APP实战:互联网医院系统源码详解

本篇文章&#xff0c;笔者将深入探讨如何开发一个功能完善的数字药店APP&#xff0c;并详细解析互联网医院系统的源码实现。 一、数字药店APP的需求分析 应具备以下基本功能&#xff1a; 用户注册与登录 药品搜索与浏览 在线下单与支付 订单管理 健康咨询与远程医疗 个人…

partition()方法——分割字符串为元组

自学python如何成为大佬(目录):https://blog.csdn.net/weixin_67859959/article/details/139049996?spm1001.2014.3001.5501 语法参考 partition()方法根据指定的分隔符将字符串进行分割。如果字符串中包含指定的分隔符&#xff0c;则返回一个3元的元组&#xff0c;第一个为…

Linux_fileio学习

参考韦东山老师教程&#xff1a;https://www.bilibili.com/video/BV1kk4y117Tu?p12 目录 1. 文件IO函数分类2. 函数原型2.1 系统调用接口2.2 标准IO接口 3. fileio内部机制3.1 系统调用接口内部流程3.1 dup函数使用3.2 dup2函数使用 4. open file4.1 open实例4.2 open函数分析…

Cocos如何跟Android通信?

点击上方亿元程序员+关注和★星标 引言 Cocos如何跟Android通信 大家好,相信小伙伴们通过阅读笔者前几期的文章**《Cocos打安卓包打不出来?看看这个》,对Cocos**如何打安卓包有了一定的了解。 但是,除了把安卓包打出来,另外还有一个重要的就是要能够调用安卓提供的Java方…

[教程]Gitee保姆级图文使用教程

我们在日常的工作过程中经常会遇到&#xff0c;家里和公司资料文件同步的问题&#xff0c;以及项目开发过程中的协作问题。Git就完美的解决了这些问题&#xff0c;但是由于 Git国外服务器的原因平时网络太慢了&#xff0c;不过还好有国内的托管平台Gitee&#xff08;码云&#…

「C++系列」C++ 变量类型

文章目录 一、C 变量类型1. 基本数据类型2. 复合数据类型3. 类型修饰符 二、C 变量定义案例 1: 基本类型变量的定义和初始化案例 2: 数组的定义和使用案例 3: 结构体&#xff08;Struct&#xff09;的定义和使用案例 4: 指针的定义和使用案例 5: 类的定义和使用&#xff08;面向…

网络连接之队头阻塞!!!

一、什么是队头阻塞 队头阻塞&#xff0c;在网络模型中简单理解就是&#xff0c;对于队列型的请求模型&#xff0c;如HTTP的请求-响应模型、TCP的ACK确认机制&#xff0c;都依赖得到一个具体的响应包&#xff0c;如果收不到这个响应包&#xff0c;那下一个请求就不能发&#x…

4、音视频封装格式---FLV

FLV FLV是一种容器封装格式&#xff0c;是由Adobe公司发布和维护的&#xff0c;用于将视频编码流与音频编码流进行封装。对于任意一种封装格式&#xff0c;都有其头部区域与数据区域&#xff0c;在FLV中&#xff0c;称之为FLV Header与Body。 对于FLV Header&#xff0c;一个FL…