This is the sixth day of my participation in the August Text Challenge.More challenges in August

preface

Last time I talked about installing a vuE-Express full stack application. Today I started debugging

Front-end debugging

If you don’t have the Node package installed, install it first

npm install 
Copy the code

Open the packes.json file

Seeing three commands, we execute the local development environment

npm run serve

Copy the code

Errors in the local development environment

Window. env is not defined locally. Tencent is making it more difficult to create a local environment.

Solution:

  • Frontend/packes. json adds local environment variables

Remember to install

npm install cross-env --save
Copy the code
  • Add missing global variables based on environment variables in frontend/ SRC /main.js
import Vue from 'vue'; import App from './App.vue'; // import 'env'; import './style/app.css'; Const dev = Boolean(process.env.node_env) if(dev){window.env = {apiUrl: 'https://service-3zzanc8c-1255469424.gz.apigw.tencentcs.com/release/'}} / / add the local variable Vue. Config. ProductionTip = false; new Vue({ render: (h) => h(App), }).$mount('#app');Copy the code

Cross-domain error

Solution Open Tencent Cloud Serverless application management and enter the specified application

Open allow cross-domain access and click Save

If this deployment does not fail, the local front end will access the online interface at this time

The front-end development is the same as a normal VUE project, there is nothing special about it

Debugging on the API side

  • Go to the API folder and execute
sls dev
Copy the code

Wechat code scanning authorization Waits for uploading after the code scanning is complete

The most fun is that every update is uploaded to the cloud, which takes about 2-5 seconds. Honestly, is this called local debugging? Is there another way to debug, so I’ll leave a little hole here

There are also some unknown errors

However, debugging is not affected

Add a new table list

Open the local PG-Admin4 link to the database (see the previous article for this tool) and select Create -> TABLE to fill in the relevant information

Fill in the table name and corresponding end

Add a new route to the API folder

Back in the editor, add a list.js file to the API/Controller folder and write it as follows

Comment out the command to create a table in this demo, otherwise it will report insufficient permissions.

  • Add a controller that gets the list

Add a route to API /sls.js

Other additions, edits, and deletions are similar except for SQL statements