---
# System prepended metadata

title: Backend & Frontend

---

# Backend & Frontend

## environment
#### Using VS Code
**Extensions:**
Django
React
ES7
Javascript(ES6)

### Tutorial
https://developer.mozilla.org/zh-TW/docs/Learn/Server-side/Django

```
pip install django djangorestframework
```
```
npm install
```
```
npm i webpack webpack-cli --save-dev
npm i @babel/core babel-loader @babel/preset-env @babel/preset-react --save-dev
npm i react react-dom --save-dev
npm install @material-ui/core
npm install @babel/plugin-proposal-class-properties
npm install react-router-dom
npm install @material-ui/icons
```
# Backend
## Start a project
```
django-admin startproject Maistore
```

```
django-admin startapp frontend
```

Do this whenever changes are made to database
```
python ./manage.py makemigrations
```

```
python ./manage.py migrate
```

```
python ./manage.py runserver
```
## 匯入Sql Table
資料庫建好以後
顯示內容：
```
python manage.py inspectdb
```
將sql table直接轉換為models加入models.py的檔案裡：
```
python manage.py inspectdb > models.py
```
## Backend overview
![](https://i.imgur.com/2HrDnDa.png)




# Frontend
```
npm init -y
```
