• c++ 后台小练习--基于Vue的在线记事本


    目录

    效果

    前端代码

    后端代码


    效果

    前端使用vue3,后端使用Rester

    数据库采用cpp_redist实现的连接池

    前后端主要有获取事项,增加事项,删除事项几个简单的功能。完整的前端项目地址note_book地址

    注意处理OPTIONS方法,重点注意allow这几个字段。

    前端功能还可以继续增加,比如注册和登录。

    为不同的用户存储各自的数据。

    数据库连接池还可以进一步优化,考虑动态增加连接数量。

    对于js, var self=this, 函数也是一个对象,也有this指针

    对于log,程序关闭并不会将日志写完,只会强行kill后台线程。

    因此在析构函数中join 后台日志写线程,并写完当前线程。

    前端代码

    1. <template>
    2. <div>
    3. <h1>数据服务器地址: {{ address }}h1>
    4. <ol style="list-style-type:none">
    5. <li v-for="note in notes" :key="note.text">
    6. <h2>{{note.text}}h2>
    7. <button @click="deleteNote(note)">完成待办button>
    8. li>
    9. ol>
    10. <input type="text" id="form" placeholder="添加待办……">
    11. <input type="submit" value="确认添加" @click="addNote">
    12. div>
    13. template>
    14. <script>
    15. //import { setgroups } from 'process';
    16. import axios from 'axios'
    17. export default {
    18. name: 'NoteBook',
    19. data(){
    20. return{
    21. notes:[
    22. {text:"hhhh"},
    23. {text:"jjjjj"}
    24. ],
    25. Address: this.address
    26. }
    27. },
    28. props: {
    29. address:{default: "no url for data"},
    30. },
    31. created(){
    32. this.getNotes()
    33. console.log(this.notes)
    34. },
    35. methods:{
    36. getNotes: function(){
    37. console.log(this.address)
    38. var self=this//修改父对象,函数也是对象
    39. axios.get(this.address).then(function(res){
    40. console.log(res.data)
    41. self.notes=res.data
    42. console.log(self.notes)
    43. }
    44. ).catch((err)=>{
    45. console.log(err)
    46. })
    47. },
    48. addNote: function(){
    49. var self=this
    50. console.log(document.getElementById("form").value)
    51. axios({
    52. method:"Post",
    53. url:self.address,
    54. headers:{
    55. 'Content-Type': 'text/plain'//application/json
    56. },
    57. data:{text:document.getElementById("form").value}
    58. //data:"{\"text\":\"更加发奋建安费\"}"
    59. }).then(function(res){
    60. if(res.status==201){
    61. //update
    62. self.getNotes();
    63. alert("添加完成");
    64. }
    65. else{
    66. alert("添加失败");
    67. }
    68. })
    69. },
    70. deleteNote: function(note){
    71. var self=this
    72. axios({
    73. method:"Delete",
    74. url:self.address,
    75. data:note
    76. }).then(function(res){
    77. if(res.status==201){
    78. //update
    79. self.getNotes()
    80. alert("删除成功")
    81. }
    82. else{
    83. alert("删除失败")
    84. }
    85. })
    86. }
    87. }
    88. }
    89. script>
    90. <style scoped>
    91. style>

    后端代码

    1. #include
    2. #include
    3. #include
    4. #include"rester.h"
    5. //#define MYTEST
    6. shared_ptr server_ptr;
    7. void SigFunc(int sig)
    8. {
    9. printf("sigfunc %d\n",sig);
    10. server_ptr->running_=false;
    11. signal(SIGINT,SIG_DFL);
    12. }
    13. int main(int argc, char *argv[])
    14. {
    15. #ifdef MYTEST
    16. fclose(stdout);
    17. #endif
    18. Config config;
    19. config.Update();
    20. cout<
    21. server_ptr=make_shared(config);
    22. //close_log > 0 for close log
    23. if(!Log::get_instance()->init("log",0,8192,5000000,1000))
    24. {
    25. return 4;
    26. }
    27. printf("log inited\n");
    28. auto& connection_pool=ConnectionPool::GetInstance();//auto can not carry & itself
    29. Router note_book("/notes");//default router
    30. auto on_get= [&connection_pool](RequestPtr request_ptr,ResponsePtr response_ptr)
    31. {
    32. //auto client =ConnectToRedis();
    33. auto client=connection_pool.GetClient();
    34. ClientHelper client_helper(connection_pool,client);//for automatic return client
    35. // if(client== nullptr)
    36. // {
    37. // client =ConnectToRedis();
    38. // }
    39. cpp_redis::reply reply1;
    40. // client->get("notes_list", [&reply1](cpp_redis::reply& reply) {
    41. // reply1=reply;
    42. // std::cout << "get from redis: " << reply.as_string() << std::endl;
    43. // });
    44. auto notes_size=client->llen("notes_list");
    45. client->sync_commit();
    46. auto si=notes_size.get().as_integer()-1;
    47. std::cout<
    48. client->lrange("notes_list",0,si,[&reply1](cpp_redis::reply& reply){
    49. if(reply.ok())
    50. {
    51. reply1=reply;
    52. std::cout << "get from redis: " << reply.is_array() << std::endl;
    53. }
    54. else
    55. {
    56. cout<<"error: "<error()<
    57. }
    58. });
    59. client->sync_commit();
    60. string ret;
    61. auto arr=reply1.as_array();
    62. ret+="[";
    63. for(int i=0;isize();i++)
    64. {
    65. auto& re=arr[i];
    66. auto re_str=re.as_string();
    67. ret+=re_str;
    68. if(i==arr.size()-1)
    69. {
    70. continue;
    71. }
    72. ret+=",";
    73. }
    74. ret+="]";
    75. printf("list from redis: %s\n",ret.c_str());
    76. //client->shutdown();
    77. response_ptr->SetStatusCode(200);
    78. response_ptr->SetHeader("Content-Type", "application/json"); //application/x-zip-compressed
    79. response_ptr->SetHeader("Connection", "keep-alive");
    80. response_ptr->SetHeader("Access-Control-Allow-Origin","*");
    81. response_ptr->SetHeader("Allow","GET,POST,DELETE");
    82. response_ptr->PrintResponse();
    83. // char *buf2 = nullptr;
    84. // int length = ReadFileAll("notes.json", buf2);
    85. // response_ptr->SetData(buf2, length);
    86. int length=-1;
    87. length=ret.length();
    88. auto buf2=ret.c_str();
    89. response_ptr->SetData(buf2, length);
    90. response_ptr->CombineResponse();
    91. printf("read file all %s body_length: %d, response_length: %d \n", response_ptr->HeadersStr().c_str(),length,response_ptr->ResponseLen());
    92. };
    93. note_book.SetGet(on_get);
    94. auto on_post=[&connection_pool](RequestPtr request_ptr,ResponsePtr response_ptr)
    95. {
    96. // auto client =ConnectToRedis();
    97. auto client=connection_pool.GetClient();
    98. ClientHelper client_helper(connection_pool,client);//for automatic return client
    99. cpp_redis::reply reply1;
    100. cout<<"body: "<<(*request_ptr)["body"]<<(*request_ptr)["body"].size()<
    101. client->lpush("notes_list",vector{(*request_ptr)["body"]},[response_ptr](cpp_redis::reply& reply){
    102. if(reply.ok())
    103. {
    104. response_ptr->SetStatusCode(201);
    105. response_ptr->SetHeader("Content-Type", "application/json"); //application/x-zip-compressed
    106. response_ptr->SetHeader("Access-Control-Allow-Origin","*");
    107. response_ptr->PrintResponse();
    108. response_ptr->CombineResponse();
    109. }
    110. else
    111. {
    112. response_ptr->SetStatusCode(406);
    113. response_ptr->SetHeader("Content-Type", "application/json"); //application/x-zip-compressed
    114. response_ptr->SetHeader("Access-Control-Allow-Origin","*");
    115. response_ptr->PrintResponse();
    116. response_ptr->CombineResponse();
    117. }
    118. });
    119. client->sync_commit();
    120. //printf("%s\n",reply1.as_string().c_str());
    121. //client->shutdown();
    122. };
    123. note_book.SetPost(on_post);
    124. auto on_options=[](RequestPtr request_ptr,ResponsePtr response_ptr)
    125. {
    126. response_ptr->SetStatusCode(200);
    127. response_ptr->SetHeader("Content-Type", "application/json"); //application/x-zip-compressed
    128. response_ptr->SetHeader("Access-Control-Allow-Origin","*");
    129. response_ptr->SetHeader("Access-Control-Allow-Headers","*");
    130. response_ptr->SetHeader("Access-Control-Allow-Methods","GET,POST,OPTIONS,DELETE");
    131. response_ptr->PrintResponse();
    132. response_ptr->CombineResponse();
    133. };
    134. note_book.SetOptions(on_options);
    135. auto on_delete=[&connection_pool](RequestPtr request_ptr,ResponsePtr response_ptr)
    136. {
    137. // auto client =ConnectToRedis();
    138. auto client=connection_pool.GetClient();
    139. ClientHelper client_helper(connection_pool,client);//for automatic return client
    140. cpp_redis::reply reply1;
    141. cout<<"body: "<<(*request_ptr)["body"]<<(*request_ptr)["body"].size()<
    142. client->lrem("notes_list",0,(*request_ptr)["body"],[response_ptr](cpp_redis::reply& reply){
    143. if(reply.ok())
    144. {
    145. cout<<"delete ok"<
    146. response_ptr->SetStatusCode(201);
    147. response_ptr->SetHeader("Content-Type", "application/json"); //application/x-zip-compressed
    148. response_ptr->SetHeader("Access-Control-Allow-Origin","*");
    149. response_ptr->PrintResponse();
    150. response_ptr->CombineResponse();
    151. }
    152. else
    153. {
    154. cout<<"delete error"<
    155. response_ptr->SetStatusCode(406);
    156. response_ptr->SetHeader("Content-Type", "application/json"); //application/x-zip-compressed
    157. response_ptr->SetHeader("Access-Control-Allow-Origin","*");
    158. response_ptr->PrintResponse();
    159. response_ptr->CombineResponse();
    160. }
    161. });
    162. client->sync_commit();
    163. };
    164. note_book.SetDelete(on_delete);
    165. auto on_close=[](ConnectionPtr conn)
    166. {
    167. struct in_addr tmp;
    168. tmp.s_addr=conn->ip_;
    169. auto str_ip=inet_ntoa(tmp);
    170. LOG_INFO("connection closed:%s: %d",str_ip,conn->port_);
    171. //cout<<"close loginfo"<
    172. };
    173. note_book.SetClose(on_close);
    174. server_ptr->AddWorker(note_book);
    175. signal(SIGINT,SigFunc);
    176. server_ptr->Init();
    177. return 0;
    178. }

  • 相关阅读:
    《数据结构》(四)线性表之双向带头循环链表的实现及详解
    Java JVM——1.JVM与Java体系结构
    MongoDB JAVA 管道聚合查询 aggregate
    后端程序员实现一个IP归属地的小程序
    深入理解作用域、作用域链和闭包
    【排序算法】快速排序(C语言)
    那么多SSM框架整合,这篇用心整理的SSM框架笔记不会还有程序员没看过吧?
    简单的四则运算计算器,c 语言实现。
    IDE的组成
    【k8s源码篇之Informer篇3】理解Informer中的Reflector组件
  • 原文地址:https://blog.csdn.net/qq_42734954/article/details/126660443