©2020-2024 ioDraw All rights reserved
preface ：
Just got into a new company , The module I'm responsible for has not been designed yet . In order to practice , use vue+node operation mysql
, Make a simple ordering system , Implementation of simple full stack development , For the front end want to know node and mysql Friends reference .
text ：
One , install node.js Environmental Science
This step please search Baidu experience by yourself , Install , the moment nodejs There is no need to configure environment variables , So please download it and open it directly .
Two , Initialize front end project
1, install vue Scaffolding
npm install vue-cli // install vue Scaffolding
2, initialization vue project
vue init webpack ‘food’ (food Name of the project , You can name it at will )
3, install express,mysql
npm install express
npm install mysql
4, Project structure
node_modules by nodejs modular ,mysql To connect to the database module ,src Of components For the establishment of ,router Configuration path ,App.vue It's the main page
Three , The design part of database
Initialize database
The database is drawn in table form , Open the data software and choose to download it navicat
How much is the watch , According to the actual demand , Corresponding design
Above ：
t_emp It's a list of people ,t_emp_acct To record personnel balance changes .epm_id The field is a person id,chg_tm When to place an order ... Specific fields and requirements , You can set the required fields and types
Four ,vue Operate the database , Implementation function
1, Test database
mysql.js It's a database connection test , The name of the connection data , The password and project name correspond to the database you set up
connection.query(spl,function(err,result){})
It's after the connection , Operation on data , Here knowledge debugging tests whether the query is successful .
2, Database connection
db.js ,Node Provide one for each module exports variable , point module.exports. This is the same as each module head , There's a line of orders like this .
index.js Connection database information , Operate .
3, Database operations （（3） There are explanations for the middle, front and back ends ）
（1） increase
Here is the operation of personnel increase ：
INSERT INTO t_emp(emp_id,emp_nm) VALUES(${emp_id},'${req.query.name}')
Statement refers to the t_emp Insert front end transport id And the name ;
INSERT INTO t_emp_acct(emp_id,chg_tm,chg_type,trade_amt,trade_desc,bal_amt)
values(${emp_id},now(),‘1’,0,‘ Initialization balance ’,0) The meaning of the sentence is , take t_emp_acct Data such as initial amount are inserted into the table .
（2） Delete
This part is about personnel deletion , The content is contrary to the concept added above , Delete personnel operation .
（3） change
index.js Operation of ：
Helloword.vue Operation of ：
vue Page's $axios.post hinder api route , To make peace with index.js The path of , Can be operated . Under revision , We send the value through the front end that we receive , Through personnel's id, The balance is changed to the sum of the current balance and the previous balance .
（4） check
Querying the database is the simplest part , as long as select * from You can query the value of the table you want to get .
（5） Multi table query and data filtering
select b.sppl_nm,a.menu_desc,a.price,a.eff_dt,a.exp_dt from t_menu a,t_sppl b
where a.sppl_id = b.sppl_id and now()<a.exp_dt
It means a,b Joint query of two tables , Here is the show menu .where The latter condition is that , Two watch id Union query at the same time , And judge whether the time has expired , Menu expired content , No display .
（6） other
A lot of times , Multi table query is required , We also need to judge the conditions , Or the need to filter out the latest data through time . Here's a simple example , When someone orders ：
INSERT INTO
t_order_rec(emp_id,menu_desc,price,sppl_nm,input_tm,order_stat,remark) VALUES
('${nam}', '${cai}' , '${pri}','${gong}',now(),0,'${remark}')
We have to add information about other people's orders ;
select b.emp_nm,a.sppl_nm,a.menu_desc,a.price,a.remark,a.order_stat from
t_order_rec a,t_emp b where a.emp_id = b.emp_id and a.menu_desc!=""
still more , Query through multiple tables , Record the change of his balance, etc .
4,vue Organizing exhibition , Page information
Show some pages , Supply vue Front end knowledge reference .
Five , Local debugging
npm node index.js Start the local back-end server
npm run dev Start the local front-end server
Six , summary
Blogging for the first time , Yes node Have a basic understanding . There is a long way to learn , In the future, insist on learning and publish the summary of records . Give me more advice , Don't spray .
Technology