One person to handle the APP front and back development

0 is introduced

Supports ios and Android platforms
Git Clone github.com/liumingmusi…
CD install –> NPM install –> react-native run-ios(run-android)
Server: See the instructions below for details

1.1 NPM Environment Settings

Install the Node software: nodejs.org/en
NPM install -g CNPM –registry = registry.npm.taobao.org
Set global NPM to download resources from domestic, NPMRC to add configuration. MAC address below for/Users/liumingming /. NPMRC, modify the strict – SSL = true and registry=registry.npm.taobao.org

Install Express-Generator: NPM install -g Express-generator allows users to quickly create Express projects
To generate project modules, go to the project directory /User/liumm/A_study/app/toiletApp and run the express-e service command, where -e is the shorthand for EJS module
On the server install dependencies of the project: to enter the server project/User/liumm A_study/app/toiletApp/service executive command CNPM install, installation depend on class libraries
Start the project: Start the project using NPM start in the current directory, where the start command has been configured in package.json
Preview: Start already developed local localhost:3000, visit the address to see the start page
Preview: The app.js file in the project is the service startup entry path. Modify the views/index.ejs file under the project and restart the service
Express modify hot load: Install supervisor, NPM install Supervisor -g, modify items automatically update

1.3 Organization of project files and directories

Service bin WWW // node_modules // node_modules // lib // node_modules // node_modules // App.js file has been set CSS // all ejS templates in the project CSS file data // the project does not use the database, Json // Happy Moment data JSON it. Json //IT query JSON manager.json // Manage JSON prose Lib // Third-party lib package, including common jquery, bootstrap login.js // Home page login JS file... // routes // back-end route data.js // data interaction back-end route index.js // home views // front-end page view EJS Error 404.ejs login.ejs index.ejs tuijian.ejs Edit.ejs app.js // Front main entry file package.json // configuration information, the dependency configuration part is equivalent to Java pom.xml fileCopy the code

Standardize the format of the data returned from the backend

   {
        status : 1.//The back end returns to the page indicating 1 success 2 form verification failure 3 System exception 4 No permission
        data   :[].//The data information for a successful request can be an object or an array of objects
        info   : 'The query is successful'    //Operations performed by the current interface Login successful query successful form authentication failed no permissions and so on
   }Copy the code

/data/read/cookies
Internet information interface: /data/read/it
Management data interface: /data/read/manager
Prose data interface: /data/read/prose
Read module configuration: /data/read/config

1.6 Data Storage Port Design

Write data is a POST request (/data/write), and the parameters are passed as follows: Delete data is a POST request (/data/delete), and the parameters are passed as follows:

{new type:   type,  //Modify the resource category
        title:  title, //The article title
        url:    url,   //The article path
        img:    img    //Image path
    }Copy the code

Delete {type:   type,  //Modify the resource category
        id:     id,    //A unique id
    }Copy the code

1.8 Debugging Express Code

Sudo CNPM install -g node-inspector
Terminal Enter supervisor — debug. /bin/ WWW
Open a new Terminal type: Node-inspector &
Enter the address shown in step 3 and develop the browser access input (http://127.0.0.1:8080/? Port =5858), which is the same as debugging javascript
If you do not want to use port 8080, you can modify: node-inspector & -p 8888

Buy cloud server platform (can see Ali cloud, Huawei cloud, Tencent cloud), the purpose is just operation technology, not operation and maintenance, as long as it can be used on the line
Download the NodeJS package for Linux and download Xshell to install it
Buy a good cloud service account, use shell to log in (online tutorial many, is simply log in)
Use the tool rz provided by XShell (enter Rz in the command line and press Enter), select the downloaded NodeJS, and import it remotely.
Use the tar -xzf node-v4.4.4-linux-arm64.tar.gz command to decompress the package.
Go to the directory where the node is decompressed and run the PWD command to obtain the full path of the current folder
Use the soft connection to quickly use the command (one is Node, one is NPM), use the soft connection (similar to shortcut): Ln -s/home/kun/mysofltware/node – v0.10.28 – Linux – x64 / bin/node/usr/local/bin/node ln -s / home/kun/mysofltware/node – v0.10.28 – Linux – x64 / bin/NPM/usr/local/bin/NPM
Use NPM to install express-related packages used in development
Git clone XXX. Git clone your project, go to the project path (server), and type NPM install to install the dependencies
Use NPM to install pm2, used to start and check node related service, reference segmentfault.com/a/119000000…
Run the pm2 start. /bin/ WWW command to start the service and view it on the Internet.
Just roughly record steps, follow-up video perfect.

2. App development

Start with express and install Node.
Run the following command to install the react-native CLI using CNPM: CNPM install -g react-native cli
To initialize the react-native project, run the following command: react-native init toilet
Go to the project path CD toilet and run the react-native run-ios command to start the project. This allows you to see the items below the initialization state
Modify the index.ios.js file and save it. Select the emulator and use the shortcut key Command + R to refresh after modification

2.2 File and Directory Organization

Toilet __tests__ // test file android // android compiled file common // utility class utils. Ios //ios compiled file iOS_views //ios development use components, In order to distinguish and andriod read // read module all involved components cateagory. Js // classification component list.js // list component recommend component search.js // search component topic.js // top component Setting // set componentabout.js // about componentdetail.js // details component tips.js // help.js // readPage.js // read module settingPage.js // Set the module toiletPage.js // toilet module twebview.js //webview component weatherPage.js // weather module node_modules // jar index.ios.js dependent on the third party //ios development main program entry package.json // configuration fileCopy the code