├── .gitignore
├── config
    └── db.ts
├── controllers
    └── goods.ts
├── deps.ts
├── public
    └── index.html
├── readme.md
└── server.ts


/.gitignore:
--------------------------------------------------------------------------------
1 | .deno_plugins/


--------------------------------------------------------------------------------
/config/db.ts:
--------------------------------------------------------------------------------
 1 | import { init, MongoClient } from "../deps.ts";
 2 | 
 3 | // Initialize the plugin
 4 | await init();
 5 | 
 6 | class Database {
 7 |   public client: MongoClient;
 8 |   constructor(public dbName: string, public url: string) {
 9 |     this.dbName = dbName;
10 |     this.url = url;
11 |     this.client = {} as MongoClient;
12 |   }
13 |   connect() {
14 |     const client = new MongoClient();
15 |     client.connectWithUri(this.url);
16 |     this.client = client;
17 |   }
18 |   
19 |   get getDatabase() {
20 |   return this.client.database(this.dbName);
21 |   }
22 | }
23 | 
24 | const dbName = "deno_supermarket";
25 | const dbHostUrl = "mongodb://localhost:27017";
26 | const db = new Database(dbName, dbHostUrl);
27 | db.connect();
28 | 
29 | export default db;


--------------------------------------------------------------------------------
/controllers/goods.ts:
--------------------------------------------------------------------------------
  1 | import {
  2 |   HandlerFunc,
  3 |   Context,
  4 | } from "../deps.ts";
  5 | 
  6 | import db from "../config/db.ts";
  7 | 
  8 | // DB collection made
  9 | const database = db.getDatabase;
 10 | const goods = database.collection("goods");
 11 | 
 12 | interface Good {
 13 |   _id: {
 14 |     $oid: string;
 15 |   };
 16 |   name: string;
 17 |   price: string;
 18 |   desc: string;
 19 | }
 20 | 
 21 | export const createGood: HandlerFunc = async (c: Context) => {
 22 |   try {
 23 |     const body = await (c.body());
 24 |     if (!Object.keys(body).length) {
 25 |       return c.json({
 26 |         code: 400,
 27 |         msg: `Request can't be empty`
 28 |       }, 200);
 29 |     }
 30 |     const { name, price, desc } = body;
 31 | 
 32 |     const insertedGood = await goods.insertOne({
 33 |       name,
 34 |       price,
 35 |       desc,
 36 |     });
 37 | 
 38 |     return c.json({
 39 |       code: 200,
 40 |       msg: 'create successfully'
 41 |     }, 200);
 42 |   } catch (error) {
 43 |     return c.json(error, 500);
 44 |   }
 45 | };
 46 | 
 47 | export const fetchAllGoods: HandlerFunc = async (c: Context) => {
 48 |   try {
 49 |     const fetchedGoods: Good[] = await goods.find();
 50 | 
 51 |     if (fetchedGoods) {
 52 |       const fetchedGoodsList = fetchedGoods.length
 53 |         ? fetchedGoods.map((good) => {
 54 |           const { _id: { $oid }, name, price, desc } = good;
 55 |           return { id: $oid, name, price, desc };
 56 |         })
 57 |         : [];
 58 |       return c.json({
 59 |         code: 200,
 60 |         data: fetchedGoodsList
 61 |       }, 200);
 62 |     }
 63 |   } catch (error) {
 64 |     return c.json(error, 500);
 65 |   }
 66 | };
 67 | 
 68 | export const fetchOneGood: HandlerFunc = async (c: Context) => {
 69 |   try {
 70 |     const { name } = c.params as { name: string };
 71 | 
 72 |     const fetchedGood = await goods.findOne({name: decodeURIComponent(name)});
 73 | 
 74 |     if (fetchedGood) {
 75 |       const { _id: { $oid }, name, price, desc } = fetchedGood;
 76 |       return c.json({
 77 |         code: 200,
 78 |         data: {
 79 |           id: $oid, name, price, desc
 80 |         }
 81 |        }, 200);
 82 |     }
 83 |     return c.json({
 84 |       code: 404,
 85 |       msg: 'Good not found'
 86 |     }, 200);
 87 |   } catch (error) {
 88 |     return c.json(error, 500);
 89 |   }
 90 | };
 91 | 
 92 | export const updateGood: HandlerFunc = async (c: Context) => {
 93 |   try {
 94 |     const { id } = c.params as { id: string };
 95 | 
 96 |     const body = await (c.body()) as {
 97 |       name?: string;
 98 |       price?: string;
 99 |       desc?: string;
100 |     };
101 | 
102 |     if (!Object.keys(body).length) {
103 |       return c.json({
104 |         code: 400,
105 |         msg: "Request can't be empty",
106 |       }, 200);
107 |     }
108 | 
109 |     const fetchedGood = await goods.findOne({ _id: { "$oid": id } });
110 | 
111 |     if (fetchedGood) {
112 |       const { matchedCount } = await goods.updateOne(
113 |         { _id: { "$oid": id } },
114 |         { $set: body },
115 |       );
116 |       if (matchedCount) {
117 |         return c.json({
118 |           code: 200,
119 |           msg: 'Good updated successfully!'
120 |         }, 200);
121 |       }
122 |       return c.json({
123 |         code: 500,
124 |         msg: 'Unable to update Good'
125 |       }, 200);
126 |     }
127 | 
128 |     return c.json({
129 |       code: 404,
130 |       msg: 'Good not found'
131 |     }, 200);
132 |   } catch (error) {
133 |     return c.json(error, 500);
134 |   }
135 | };
136 | 
137 | export const deleteGood: HandlerFunc = async (c: Context) => {
138 |   try {
139 |     const { id } = c.params as { id: string };
140 | 
141 |     const fetchedGood = await goods.findOne({ _id: { "$oid": id } });
142 | 
143 |     if (fetchedGood) {
144 |       const deleteCount = await goods.deleteOne({ _id: { "$oid": id } });
145 |       console.log(deleteCount)
146 |       if (deleteCount) {
147 |         return c.json({code: 200, msg: 'ok'}, 200);
148 |       }
149 |       return c.json({code: 500, msg: 'Unable to delete good'}, 200);
150 |     }
151 | 
152 |     return c.json({
153 |       code: 404,
154 |       msg: 'good not found'
155 |     }, 200);
156 |   } catch (error) {
157 |     return c.json(error, 500);
158 |   }
159 | };


--------------------------------------------------------------------------------
/deps.ts:
--------------------------------------------------------------------------------
1 | export * from 'https://deno.land/x/abc@v1.0.0-rc2/mod.ts';
2 | export * from 'https://deno.land/x/mongo@v0.6.0/mod.ts'


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 |   <meta charset="UTF-8">
  5 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6 |   <title>Deno Supermarket</title>
  7 |   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  8 |   <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
  9 |   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
 10 |   
 11 |   <style>
 12 |     .toolbar {
 13 |       padding: 20px;
 14 |       display: flex;
 15 |       justify-content: flex-end;
 16 |     }
 17 | 
 18 |     input#inputSearch {
 19 |       margin-left: 20px;
 20 |       width: 12em;
 21 |     }
 22 | 
 23 |     .btn {
 24 |       margin: 0 0.5em;
 25 |     }
 26 | 
 27 |     th,
 28 |     td {
 29 |       text-align: center;
 30 |     }
 31 |   </style>
 32 | </head>
 33 | <body>
 34 |   <div class="container">
 35 |     <div class="toolbar">
 36 |       <button class="btn btn-primary" id="btnAdd" data-toggle="modal" data-target="#exampleModal">添加商品</button>
 37 |       <input type="email" class="form-control" id="inputSearch" placeholder="输入商品名称查询">
 38 |       <button class="btn btn-success" id="btnSearch" onclick="fetchOneGood()">搜索商品</button>
 39 |     </div>
 40 |     <table class="table table-striped" id="tableGoods">
 41 |     </table>
 42 |     
 43 |     <!-- Modal -->
 44 |     <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
 45 |       <div class="modal-dialog" role="document">
 46 |         <div class="modal-content">
 47 |           <div class="modal-header">
 48 |             <h5 class="modal-title" id="exampleModalLabel">添加商品</h5>
 49 |             <button type="button" class="close" data-dismiss="modal" aria-label="Close">
 50 |               <span aria-hidden="true">&times;</span>
 51 |             </button>
 52 |           </div>
 53 |           <div class="modal-body">
 54 |             <form class="form-horizontal">
 55 |               <input type="hidden" id="goodId">
 56 |               <div class="form-group">
 57 |                   <label for="" class="control-label">商品名称</label>
 58 |                   <input type="email" class="form-control" id="goodName" placeholder="请输入商品名称">
 59 |                
 60 |               </div>
 61 |               <div class="form-group">
 62 |                   <label class="control-label">商品价格</label>
 63 |                   <input type="text" class="form-control" id="goodPrice" placeholder="请输入商品价格">
 64 |               </div>
 65 |               <div class="form-group">
 66 |                 <label class="control-label">商品描述</label>
 67 |                   <input type="text" class="form-control" id="goodDesc" placeholder="请输入商品描述">
 68 |                 </div>
 69 |             </form>
 70 |           </div>
 71 |           <div class="modal-footer">
 72 |             <button type="button" class="btn btn-secondary" data-dismiss="modal" id="btnClose">Close</button>
 73 |             <button type="button" class="btn btn-primary" id="btnSave" onclick="handlerSave()">Save changes</button>
 74 |           </div>
 75 |         </div>
 76 |       </div>
 77 |     </div>
 78 |   </div>
 79 | 
 80 |   <script>
 81 |     const $tableGoods = $('#tableGoods');
 82 |     const $goodId = $('#goodId');
 83 |     const $goodName = $('#goodName');
 84 |     const $goodPrice = $('#goodPrice');
 85 |     const $goodDesc = $('#goodDesc');
 86 |     
 87 |     const api = '/api/goods';
 88 | 
 89 |     let allData = [];
 90 | 
 91 |     function superFetch(url, config = {}) {
 92 |       return fetch(url, config)
 93 |         .then(res => res.json())
 94 |         .then(res => {
 95 |           const { code, data = {}, msg } = res;
 96 |           if(code != 200) {
 97 |             throw new Error(msg);
 98 |           }
 99 |           return data;
100 |         })
101 |     }
102 | 
103 |     function renderGoods(data = []) {
104 |       allData = data;
105 |       const headerRow = `
106 |         <tr>
107 |           <th>商品id</th>
108 |           <th>商品名称</th>
109 |           <th>商品价格</th>
110 |           <th>商品描述</th>
111 |           <th>操作</th>
112 |         </tr>
113 |       `;
114 |        const rows = data.map(row => `
115 |           <tr data-id="${row.id}" data-content="${JSON.stringify(row)}">
116 |             <td>${row.id}</td>
117 |             <td>${row.name}</td>
118 |             <td>${row.price}</td>
119 |             <td>${row.desc}</td>
120 |             <td>
121 |               <button class="btn btn-danger" id="btnDelete">删除</button>
122 |               <button class="btn btn-info" id="btnUpdate"  data-toggle="modal" data-target="#exampleModal">修改</button>
123 |             </td>
124 |           </tr>
125 |         `);
126 | 
127 |       $tableGoods.html(headerRow + rows.join(''));
128 |     }
129 | 
130 |     // 添加或修改商品的表单处理
131 |     function handlerSave() {
132 |       const id = $goodId.val().trim();
133 |       const name = $goodName.val().trim();
134 |       const price = $goodPrice.val().trim();
135 |       const desc = $goodDesc.val().trim();
136 |       
137 |       if(!name || !price || !desc) {
138 |         return alert('字段不能为空！')
139 |       }
140 | 
141 |       // 如果没有 id 则是新建
142 |       if(!id) {
143 |         this.createGood({
144 |           name,
145 |           price,
146 |           desc
147 |         })
148 |       } else {
149 |         this.updateGood({
150 |           id,
151 |           name,
152 |           price,
153 |           desc
154 |         })
155 |       }
156 |     }
157 | 
158 |     // 获取所有的商品
159 |     function fetchAllGoods() {
160 |       return superFetch(api, {
161 |         method: 'get',
162 |       })
163 |       .then(res => {
164 |         renderGoods(res);
165 |       })
166 |     }
167 | 
168 | 
169 |     // 添加商品
170 |     function createGood(goodInfo) {
171 |       return superFetch(api, {
172 |         method: 'post',
173 |         body: JSON.stringify(goodInfo)
174 |       })
175 |      
176 |       .then(res => {
177 |           fetchAllGoods();
178 |           $goodName.val('');
179 |           $goodDesc.val('');
180 |           $goodPrice.val('');
181 |           $('#btnClose').trigger('click');
182 |         })
183 |         .catch(err => {
184 |           aler(err.message);
185 |         })
186 |     }
187 | 
188 |     // 通过商品名称搜索一个商品
189 |     function fetchOneGood() {
190 |       const goodName = $('#inputSearch').val().trim();
191 |       if(!goodName) {
192 |         return fetchAllGoods();
193 |       }
194 | 
195 |       return superFetch(api + '/' + goodName)
196 |       .then(res => {
197 |         renderGoods([res]);
198 |       })
199 |       .catch(err => {
200 |         renderGoods([])
201 |       })
202 |     }
203 | 
204 |     // 更新商品
205 |     function updateGood(goodInfo) {
206 |       const id = goodInfo.id;
207 |       delete goodInfo.id;
208 |       superFetch(api + '/' + id, {
209 |         method: 'put',
210 |         body: JSON.stringify(goodInfo)
211 |       }).then(() => {
212 |         fetchAllGoods();
213 |         $('#btnClose').trigger('click');
214 |       }).catch(err => {
215 |         alert(err.message)
216 |       })
217 |     }
218 | 
219 |     // 删除商品
220 |     function deleteGood(id) {
221 |       if(!window.confirm('确定要删除吗？')) {
222 |         return 
223 |       };
224 |       fetch(api + '/' + id, {
225 |         method: 'delete'
226 |       })
227 |       .then(res => {
228 |         fetchAllGoods();
229 |       })
230 |       .catch(err => {
231 |           aler(err.message);
232 |         })
233 |     }
234 | 
235 | 
236 |     // 获取所有的商品数据
237 |     fetchAllGoods();
238 |     $('#btnAdd').click(() => {
239 |       $goodId.val('')
240 |     });
241 | 
242 |     // 监听删除表格的和修改按钮
243 |     $tableGoods.on('click', (e) => {
244 |       const $target = $(e.target);
245 |       if($target.attr('id') === 'btnDelete') {
246 |         const id = $target.parents('tr').data('id');
247 |         deleteGood(id);
248 |       }
249 |       if($target.attr('id') === 'btnUpdate') {
250 |         const id = $target.parents('tr').data('id');
251 |         const item = allData.find(item => item.id === id) || {};
252 |   
253 |         const { name, price, desc} = item;
254 |         $goodName.val(name)
255 |         $goodPrice.val(price)
256 |         $goodDesc.val(desc);
257 |         
258 |         $goodId.val(id);
259 |       }
260 |     });
261 |   </script>
262 | </body>
263 | </html>


--------------------------------------------------------------------------------
/readme.md:
--------------------------------------------------------------------------------
 1 | ## What's it?
 2 | Use deno + ts + mongodb to build a supermarket App!
 3 | 
 4 | > Tips: You should install deno 1.0  and mongodb on your machine. 
 5 | 
 6 | ## How to lauch it ?
 7 | ```bash
 8 | # goto the root dir, then:
 9 | deno run -A --unstable ./server.ts 
10 | ```
11 | 
12 | After launching successfully, you can visit the page on http://localhost:8000/pages/ .
13 | 
14 | 
15 | 
16 | ## UI
17 | ![](https://ok.166.net/gameyw-misc/opd/squash/20200521/173754-5hdm8j1w6c.png)
18 | 
19 | 
20 | 
21 | 


--------------------------------------------------------------------------------
/server.ts:
--------------------------------------------------------------------------------
 1 | import { Application, Context } from "./deps.ts";
 2 | import {
 3 |   createGood,
 4 |   fetchAllGoods,
 5 |   fetchOneGood,
 6 |   updateGood,
 7 |   deleteGood,
 8 | } from "./controllers/goods.ts";
 9 | 
10 | const app = new Application();
11 | 
12 | app
13 |   .static('/pages', './public') // 静态资源
14 | 
15 |   // 以下是增删查改的api
16 |   .get("/api/goods", fetchAllGoods)
17 |   .post("/api/goods", createGood)
18 |   .get("/api/goods/:name", fetchOneGood)
19 |   .put("/api/goods/:id", updateGood)
20 |   .delete("/api/goods/:id", deleteGood)
21 | 
22 |   .start({ port: 8000 });
23 |   console.log('start successfully. you can visit it on http://localhost:8000/pages/')
24 | 


--------------------------------------------------------------------------------