First, the basic packaging process

 

1. Organize your thoughts

I believe that there are many companies, used to the old ERP system, software UI solidified into WINDOWS desktop applications. You put an Element project in front of him and he doesn’t like it! He wants to encapsulate your Web project as a client! Yes, you heard me right! Our goal is to encapsulate a Web project as a client!

2. How?

Should I redevelop an OA client? Do I forget to eat and sleep for a month to study C++? My idea is definitely to write a container, embedded H5 web page! Do you, the smart one, see? That’s what Dingding is said to have done!

First of all, you need to have an official online project that can be accessed from the extranet or Intranet. I take my CSDN homepage as an example! Second, write a blank H5 interface and add a JS that jumps to your project’s url. Finally, wrap the H5 file with NodeWebKit as a client! Vue project, packaged is actually H5 files, can be generalized!

 

3. Download NodeWebKit

IO /, download the nwjs-v0.54.0-win-x64.zip file and unzip it to the specified folder

It’s open source, of course. You can download the source code at Github: github.com/nwjs/nw.js

Download 3.1:

3.2 unzip

 

Create a package.json file

5. Create an index. HTML file

 

6. After the zip file is packed, change the suffix to NW

After changing the suffix name, see the picture below:

 

7. Pack your files

Copy 2.nw to the folder in step 1 and use CMD to open the directory in step 1

Execute command:

Merge two EXE files into one

After the command is executed, the app.exe file is generated in the current directory

Double-click to open the result:

 

8. Release client

App.exe will not work if you copy it directly to another directory. Because app.exe has a lot of dependent files, such as various DLL files under the directory. To officially use this client, you need to package the entire directory as the installation directory of the client.

The original CSDN links: zwz99.blog.csdn.net/article/det…

 

Ii. Vue project packaging

 

2.0 Idea Analysis

As the smart reader will have noticed, I’ve already wrapped the CSDN home page as a client. Encapsulating the Vue project as a client problem can be broken down into the following two steps: 1. Deploy the Vue project to Nginx, put it on the server, and generate a url 2. Apply the url to the jump path of the previous H5 file. Done! The second step is explained in detail earlier, so let’s try out how to publish Vue to the server!

 

2.1 What is Nginx

Nginx is a lightweight Web server and reverse proxy server, which is widely used in Internet projects due to its small memory footprint, extremely fast startup and high concurrency. Just as Tomcat is perfect for running Java projects, Nginx is perfect for running Vue projects, they are a pair of CP’s!

The conf folder contains a key configuration file, nginx.conf. This file allows you to configure the Vue project’s run port, SSL certificates, reverse proxies, load balancing, and more. The specific code will be given at the end!

Under the HTML folder, you can put the files in the DIST packaged by Vue, perfect compatibility! Run some logs under the log folder. If you find it doesn’t work, you can check it out. The so-called forward proxy is the proxy server to replace you to access the server, such as foreign websites, using the proxy server, can greatly speed up the access, can be understood as VPN, you know what you are visiting, but foreign websites only know that the proxy server is visiting him, do not know who is really visiting.

The so-called reverse proxy is the proxy server instead of the server to access you, you do not need as long as the request of the proxy server, he will help you forward to the corresponding server according to your request. The target server knows you’re visiting, but you don’t know which server you’re visiting!

 

2.2 Vue Project Deployment

After placing the Vue package files in the HTML folder, you are ready to start Nginx! CMD go to Nginx directory, run the command can!

2.3 Online Verification

If a cloud server is deployed, ensure that the Internet access function is enabled. For example, Aliyun prohibits Internet access except port 8080 by default, while Tencent Cloud does not. If restricted, you need to log in to the appropriate console Settings. Open the browser, make sure the project can be accessed, and finally apply the URL to the previous H5 file to complete the client package!

 

Third, the appendix

 

Package. json complete code

{/** Specifies the start page of the program. */ "main": "index.html", /** The string must contain lowercase letters or numbers. Or _ or - Spaces are not allowed. Name must be globally unique. * / "name" : "OA", program description * / * * / "description" : "OA office system", the program version number is * * * / "version" : "1.0.0", / * * * / "keywords" keyword: ["demo","node-webkit"], /**bool. If set to false, webKit node support is disabled. */ "nodejs": true, /** * Specifies a Node.js file that will be run when the program starts earlier than the time node-webKit loads the HTML. * It runs in the context of Node and can be used to implement background thread-like functionality. Don't * (don't need to comment) * / / / "node - the main" : "js/node. Js", / * * * Boolean value. By default, if you distribute a Node-WebKit application as a package, only one instance of the application can be launched. * If you want to allow multiple instances to be started simultaneously, set this value to false. */ "single-instance": true, /** Set window properties */ "window": {/** string, set default title. */ "title": "OA", /** window icon. */ "icon": "img/ tubo.ico.png ", /**bool value. Whether to display the navigation bar. */ "toolbar": false, /**bool. Whether window resizing is allowed. */ "resizable": true, /** whether fullscreen */ "fullscreen": false, /** whether to display ICONS in Windows taskbar */ "show_in_taskbar": false, /**bool value. If set to false, the program will be displayed without borders. */ "frame": true, /** String. The window opening position can be set to NULL, Center, or Mouse. */ "position": "center", /** Width of the main window. */ "width": 1920, /** The main window height. */ "height": 1080, /** The minimum window width. */ "min_width": 400, /** Minimum window height. */ "min_height": 335, /** Maximum window width, optional. "Max_width ": 800,*/ /** The maximum window height, optional. "Max_height ": 670,*/ /** The bool value, if set to false, is invisible at startup. */ "show": true, /** Whether to display ICONS in the taskbar. */ "show_in_taskbar":true, /** * bool. Whether to use kiosK mode. In KIOSk mode, * the application is displayed in full screen and the user is prevented from leaving the application. ** / "KIOSk ": false}, /** webKit Settings */ "webkit": {/**bool value, whether to load plug-ins such as Flash, the default value is false. */ "plugin": true, /**bool indicates whether to load Java applets. The default value is false. */ "Java ": false, /**bool indicates whether page caching is enabled. The default value is false. */ "page-cache": false}} # worker_processes = worker_processes 16; Events {# Maximum number of concurrent connections per worker process. } HTTP {# enable efficient file transfer mode sendFile on; Keepalive_timeout 65; Send_timeout 30; # Maximum number of bytes per file that a client can request. client_max_body_size 100m; Client_body_buffer_size 128K; Include mime.types; Default_type application/octet-stream; / / let the browser think the response is a normal file stream and prompt the user to download the file such as image PDF. charset utf-8; tcp_nopush on; gzip on; # minimum file compression threshold gzip_min_length 1k; Gzip_buffers 4 16k; Gzip_http_version 1.0; Disable gzip_disable 'MSIE[1-6].'; # gzip_comp_level 6; Gzip_types text/ CSS text/javascript application/javascript image/ JPEG image/ PNG image/ GIF; Tell clients whether they can cache gzip_vary on; # gzip_proxied off for reverse proxy; Upstream {server 127.0.0.1:13145 weight=1; } server { listen 8080 ssl; server_name localhost; # server_name xxxxxx.com; client_max_body_size 100m; Proxy_buffers 16 1024K; proxy_buffer_size 1024k; Proxy_set_header x-real-ip $remote_addr; Forwarded_for $forwarded_forwarded_for proxy_ADD_X_forwarded_for $forwarded_forwarded_for $forwarded_forwarded_for ssl on; ssl_certificate ssl/4798969_xxxxxx.com.pem; ssl_certificate_key ssl/4798969_xxxxxx.com.key; ssl_session_timeout 5m; ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:! NULL:! aNULL:! MD5:! ADH:! RC4; Ssl_protocols TLSv1 TLSv1.1 TLSv1.2; ssl_prefer_server_ciphers on; charset utf-8; location / { root html; index index.html index.htm; add_header 'Access-Control-Allow-Origin' '*'; } location /xboot {# reverse proxy proxy_pass http://zwz; } error_page 404 /404.html; }}Copy the code

The original CSDN links: zwz99.blog.csdn.net/article/det…

Recently in view of the Internet company interview asked knowledge points, summed up the Java programmer interview involves most of the interview questions and answers to share with you, I hope to help you review before the interview and find a good job, but also save you on the Internet to search for information time to learn.

Content covers: Java, MyBatis, ZooKeeper, Dubbo, Elasticsearch, Memcached, Redis, MySQL, Spring, SpringBoot, SpringCloud, RabbitMQ, Kafka, Linux and other technology stacks.

Full version Java interview questions address: Java backend questions integration