Update README.md

Author: mtianyan

README.md

@@ -3,7 +3,7 @@
 ![](https://img.shields.io/pypi/v/tyadmin-api-cli)
 ![](https://img.shields.io/pypi/wheel/tyadmin-api-cli)
 
-## 🎬 在线体验Demo
+# 🎬 在线体验Demo
 
 >账号: tyadmin 密码: tyadmin
 
@@ -13,6 +13,8 @@
 
 TyAdmin: 只需要花五分钟阅读README即可快速上手，无额外文档，无框架学习成本，不用自己写一行代码，全自动的后台，你值得拥有！
 
+# 🤟  快速上手
+
 📨 互动交流反馈QQ群: 304094780
 
 [快速上手](#快速上手) 
@@ -148,4 +150,204 @@ path('api/xadmin/v1/', include('tyadmin_api.urls')),
 ## 6. 运行项目
 
 ```
-python manage.py 
+python manage.py makemigrations
+python manage.py migrate
+python manage.py createsuperuser # 创建一个可以登入后台的用户
+python manage.py runserver # 默认运行在8000端口
+```
+
+访问http://127.0.0.1:8000/xadmin/ 输入刚才创建的用户名密码登录
+
+至此大功告成！
+
+>如果没有成功看到页面，请查看QA部分
+
+# QA环节
+
+## 0. `TemplateDoesNotExist at /xadmin/ TyAdmin/index.html`
+
+settings.py 中配置templates 路径
+
+```diff
+TEMPLATES = [
+    {
+        'BACKEND': 'django.template.backends.django.DjangoTemplates',
+-        'DIRS': [],
++        'DIRS': [os.path.join(BASE_DIR, 'templates')],
+```
+## 1. 卡在loading页面，一直无法登陆
+
+settings.py 中配置static 路径
+
+```
+if DEBUG:
+    STATICFILES_DIRS = [
+        os.path.join(BASE_DIR, "static"),
+    ]
+else:
+    STATIC_ROOT = os.path.join(BASE_DIR, 'static')
+```
+
+## 2. 图片没有正常显示
+
+urls.py 
+
+```
+from django.views.static import serve
+
+urlpatterns = [
+re_path('media/(?P<path>.*)', serve, {"document_root": settings.MEDIA_ROOT}),
+]
+```
+
+## 3. 当项目新增了model，我该如何为新model生成前端页面+后端接口
+
+```
++TY_ADMIN_CONFIG = {
++    'GEN_APPS': ['demo','new_app']
++}
+```
+如上GEN_APPS 中添加新app的name，然后运行下面命令
+
+```
+python manage.py gen_all && cd tyadmin && npm run build
+```
+
+## 4. 如何运行生成的前端独立项目
+
+```
+cd tyadmin
+npm install
+npm run start:dev # 默认会运行在8001端口
+```
+
+请确认django运行在8000端口，访问 http://127.0.0.1:8001/xadmin/
+
+# 🤝 贡献者名单:
+
+[longyn](https://github.com/longyn)
+
+# 🤟 打赏
+
+很高兴我的项目代码或许对你有帮助，请我吃包辣条或喝瓶可乐吧!
+
+微信打赏:
+
+![mark](http://myphoto.mtianyan.cn/blog/180302/i52eHgilfD.png?imageslim)
+
+# 🔑 License
+
+[MIT](https://github.com/go-admin-team/go-admin/blob/master/LICENSE.md)
+
+Copyright (c) 2020 mtianyan
+
+
+# 附录
+
+## model->前端对应关系
+
+|  字段类型   | 前端展示  |
+|  ----  | ----  |
+| ForeignKey  | 单选 |
+| ManyToManyField  | 多选 & 多彩标签展示 |
+| richTextField  | 富文本展示 |
+| CharField or IntegerField(with choices)  | 多选 |
+| CharField or IntegerField  | 输入框 |
+| ImageField  | 带预览上传，可选头像，图片列表展示 |
+| FileField  | 文件上传 |
+| TextField  | TextArea框 |
+| BooleanField | Switch选择|
+| IntegerField | 数字input|
+| DateField| Date选择器|
+| DateTimeField| DateTime选择器|
+
+### ForeignKey自动生成下拉单选菜单, ManyToManyField自动生成下拉多选菜单或穿梭框
+
+![](http://cdn.pic.mtianyan.cn/blog_img/20201202214922.png)
+
+![](http://cdn.pic.mtianyan.cn/blog_img/20201202214936.png)
+
+![](http://cdn.pic.mtianyan.cn/blog_img/20201202214957.png)
+
+### richTextField 自动生成富文本
+
+```
+detail = richTextField(verbose_name="课程详情")
+```
+
+![](http://cdn.pic.mtianyan.cn/blog_img/20201010193352.png)
+
+### CharField和IntegerField choices 自动生成表单前端下拉选择框。
+
+```python
+GENDER_CHOICES = (
+   ("male", "男"),
+   ("female", "女")
+)
+gender = CharField(verbose_name="性别",choices=GENDER_CHOICES)
+```
+
+![](http://cdn.pic.mtianyan.cn/blog_img/20201010190635.png)
+
+### ImageField 自动生成带预览的表单上传功能，列表页可选两种展示方式。
+
+```python
+avatar = ImageField(verbose_name="头像") # 变量名为avatar或logo的会自动为头像样式
+image = ImageField(verbose_name="封面图")    
+```
+
+![](http://cdn.pic.mtianyan.cn/blog_img/20201010191641.png)
+
+![](http://cdn.pic.mtianyan.cn/blog_img/20201010191917.png)
+
+![](http://cdn.pic.mtianyan.cn/blog_img/20201010191843.png)
+
+### FileField 字段生成文件上传功能。
+
+```
+download = FileField(verbose_name="资源文件")
+```
+
+![](http://cdn.pic.mtianyan.cn/blog_img/20201010193041.png)
+
+### TextField 自动生成前端TextArea 框
+
+```python
+desc = TextField(verbose_name="课程描述")
+```
+
+![](http://cdn.pic.mtianyan.cn/blog_img/20201010192813.png)
+
+### BooleanField 自动前端 Boolean 单选
+
+```python
+is_banner = BooleanField(verbose_name="是否轮播")
+```
+
+![](http://cdn.pic.mtianyan.cn/blog_img/20201010193001.png)
+
+### IntegerField 自动前端 Int 输入框
+```
+learn_times = IntegerField(verbose_name="学习时长(分钟数)")
+```
+![](http://cdn.pic.mtianyan.cn/blog_img/20201010193445.png)
+
+### DateField 自动前端 Date选择框
+
+```
+birthday = DateField(verbose_name="生日")
+```
+![](http://cdn.pic.mtianyan.cn/blog_img/20201010193614.png)
+
+### DateTimeField 自动表单 DateTime 选择框，时间范围筛选器。
+
+```
+last_login = DateTimeField(verbose_name="上次登录")
+```
+
+![](http://cdn.pic.mtianyan.cn/blog_img/20201010193852.png)
+
+>注意设置了default，auto_now的不会出现在表单
+
+![](http://cdn.pic.mtianyan.cn/blog_img/20201010195116.png)
+