Start from scratch - Web Host - 01

Starting from scratch - Web host - 01

Preface ：

• I went to work as a social animal immediately after the winter vacation , The first project received after work is to make a local host computer into a web version . The local upper computer uses C++ and Qt Library , I have used it before Python and Qt Library writing host computer , It is used to receive the image data of the single chip microcomputer camera . I originally wanted to do the whole tutorial , I was too lazy to do , I don't want to do it now . The source code is in my GitHub In the warehouse , Those who are interested can copy and run ：【 Portal 】.
• Now I plan to use JavaScript Write a web version of the upper computer , Because I have a little experience before . This has been a tutorial ：【 be based on Node.js And WebSocket Set up server note - 00 - Initial cloud server 】. This time the whole thing is a little complete , Because when I did it before, I actually knew a little ,js Not familiar with language . Although not very familiar now , But writing simple code is still useful . Record the learning process .

One 、 Environment building

• First of all, think about how this web page Deploy （ I don't know whether this term is right ）, There are many options , I have used two , One is to use pyhton, One is to use JavaScript.pyhton You can refer to this tutorial for the relevant implementation methods of ：【 How to make a web page for your girlfriend as a birthday gift 】, Not the point I want to introduce , skip .

I wanted to explain node.js and js, such as ：js The code can also be directly allowed in the browser console , No installation required nodejs…… As soon as I write, I feel embarrassed 、 the language fails to express the meaning , Change and give up . I'd better put other people's popular science articles directly ：【 Portal 】. I am responsible for recording the process .

1、 install Node.js

Recommended tutorials ：【Nodejs+npm Detailed installation _Gilagamesh The blog of -CSDN Blog _node install npm】

• Download installation package ;【 download | Node.js Chinese net (nodejs.cn)】
• Install the software ; next step … Installation address … next step … complete .
• Install the module manager npm; Integrated , Default installation .

 Default address ：C:\Users\ user name \AppData\Roaming\npm

• Check and configure environment variables ; My computer - attribute - Advanced system setup - environment variable .

node -v
npm -v

• modify npm Cache directory and global directory path ;（ Create new folders without ）

npm config set prefix "node The installation path \node_global"   	// Configuration path 
npm config set cache "node The installation path \node_cache"   	//
npm config get prefix			// View path 
npm config get cache   			//

• To configure npm and nodejs Environment variables of ;

 Variable name ：NODE_PATH
 A variable's value ：node The installation path \node_global\node_modules

• In fact, the global module is generally not installed , Are installed in the project . So this path is rarely used .

2、 New project

• New project folder , Open the terminal in this folder path , Enter the following command . The module package management script can be initialized package-lock.json.

npm install

• Consider what to use Web frame , I've used koa、nodejs-websocket, The following is the tutorial used before .

【nodejs-websocket establish websocket The server _ Cat reads your blog -CSDN Blog _nodejs websocket Server setup 】

【koa introduction - Liao Xuefeng's official website (liaoxuefeng.com)】

• At present, it is recommended that Express frame （ Because I just saw ）, Use npm Install Express modular .

npm install express --save

【Node.js Express frame | Novice tutorial (runoob.com)】

【Express Use of framework （ detailed ）_ The imprint of rain blog -CSDN Blog _express Frame usage 】

【 Use npm How to install the module _ Work hard, use your brain more, talk less, do more, accumulate more -CSDN Blog _nodejs Install the module 】

• Create a few more folders , Deposit html、css、js、 Pictures and other documents . The project catalogue refers to ：【 How to make a web page for your girlfriend as a birthday gift 】

|-- project

​ | – node_modules // Module package

​ | – static // Static files

​ | | – css // css file

​ | | – image // Picture file

​ | | — script // js file

​ | – templates // html file

​ | – package-lock.json // Module package registry

• It may be crap More , Here is formal Start .

Two 、 mount

Code reference ：【Express in app.use() usage - Simple books (jianshu.com)】

• In the project root directory project Create a script under ,express.js. Put it in the root directory for convenient direct access to local static files . Enter the following code in the script .

// express.js  file 
let express = require('express');
let app = express();

//  Direct access to local static files 
app.use('/',express.static('./'));

//  mount 
let server = app.listen(8080, function () 
{
    
	let port = server.address().port;
	console.log(" visit :http://localhost:%s/templates/main.html",port);
})

• Then in the project directory project/templates Create web page file under ,main.html. You can enter some words in the web page .

<!-- main.html  file  -->
 test 

• function express.js Script files , Then click the website printed out in the terminal , You can open the web page and see “ test ” Two words .

• thus , The web page has been mounted . Then deploy the cloud , Set domain name and other knowledge , You can refer to another tutorial ：【 be based on Node.js And WebSocket Set up server note - 00 - Initial cloud server _Lovely_him The blog of -CSDN Blog _nodejs websocket The server 】. This part is not the focus of this course , The key is The process of making web pages and Use of serial port function .

3、 ... and 、 Layout of web pages

Leave a hole , Waiting for update .